如何设置两个 html 节点的 innerText，其中一个是子节点？

Question

在javaScript中，有人可以帮我设置x个html节点的textContent，其中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>

如何设置两个 html 节点的 innerText，其中一个是子节点？

How can I set the innerText of two html nodes where one is a child?

javascript

innertext