Как установить innerText из двух узлов html, где один является дочерним?

Question

В javaScript, может кто-нибудь, пожалуйста, помогите мне установить textContent x количества узлов html, где узлы html могут быть дочерними узлами html?

Вот функция JavaScript, что у меня есть:

function setTextContent(className, data) 
{ 
    var elements = document.getElementsByClassName(className); 
    for (var i = 0, len = elements.length; i < len; i++) { 
     elements[i].textContent = data; 
    } 
} 

Вот HTML, что у меня есть:

<div class="test"><div class="test2"></div></div> 

Вот два вызова функции:

setTextContent('test', "testString1"); 
setTextContent('test2', "testString2"); 

данные, которые я получаю:

testString1 

Как я могу получить следующие отображения:

testString1 
testString2 

Я хотел бы, пожалуйста, сделать это без JQuery и хотел бы этот код, чтобы иметь возможность использовать на какой-либо структуры элемента, где HTML узлы могут иметь много другие узлы html с атрибутами html.

Спасибо.

Answer 1

Из вашего примера, выглядит, как вы хотите, чтобы вставить текст в начале родительского элемента так

function setTextContent(className, data) { 
 
    var elements = document.getElementsByClassName(className), 
 
    el; 
 
    for (var i = 0, len = elements.length; i < len; i++) { 
 
    el = elements[i]; 
 
    if (!el.firstChild) { //if there are no contents within the element insert a text node 
 
     el.appendChild(document.createTextNode('')); 
 
    } else if (el.firstChild.nodeType != Node.TEXT_NODE) { //if the first child is not a text node then insert one 
 
     el.insertBefore(document.createTextNode(''), el.firstChild); 
 
    } 
 
    el.firstChild.textContent = data; 
 
    } 
 
} 
 

 
setTextContent('test', "testString1"); 
 
setTextContent('test2', "testString2");

<div class="test"> 
 
    <div class="test2"></div> 
 
</div>

Answer 2

function setTextContent(className, data) { 
 
    var elements = document.getElementsByClassName(className); 
 
    var node=document.createTextNode(data); 
 
    for (var i = 0, len = elements.length; i < len; i++) { 
 
     elements[i].insertBefore(node, elements[i].childNodes[0]); 
 
    } 
 
} 
 
setTextContent('test', "testString1"); 
 
setTextContent('test2', "testString2");

<div class="test"> 
 
     <div class="test2"></div> 
 
    </div>

создать текстовый узел и вставить его до childNode [0]

Answer 3

Пожалуйста, попробуйте этот код,

function setTextContent(className, data) { 
     var elements = document.getElementsByClassName(className); 
     for (var i = 0, len = elements.length; i < len; i++) { 
      elements[i].innerHTML = data + elements[i].innerHTML; //Append the data with children nodes. 
     } 
    } 

Fiddle

Надеется, что это поможет.

Answer 4

Кажется, вы хотите заменить первый текстовый узел или узлы внутри элемента. Если нет ведущих текстовых узлов, вставьте их. Далее следует сделать работу:

function insertText(element, text) { 
 
    while (element.firstChild && element.firstChild.nodeType != 1) { 
 
    element.removeChild(element.firstChild); 
 
    } 
 
    element.insertBefore(document.createTextNode(text), element.firstChild); 
 
}

<div id="d0">text at the begining<span> some in a span </span>and more<div> 
 
<button onclick="insertText(document.getElementById('d0'), 'new text 0')">Insert 0</button> 
 
<div id="d1">only text, nothing else<div> 
 
<button onclick="insertText(document.getElementById('d1'), 'new text 1')">Insert 1</button> 
 
<div>empty element following <span id="s0"></span><div> 
 
<button onclick="insertText(document.getElementById('s0'), 'new text 2')">Insert 2</button>