Question

在javaScript中，有人可以帮我设置x内容的x内容的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

在您的示例中，看起来您希望在父元素的开头插入文本，以便

＆＃13;

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");

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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");

＆＃13;

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

＆＃13;

创建文本节点并在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

您似乎想要替换元素中的第一个文本节点。如果没有前导文本节点，请插入一些。以下应该做的工作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

4 个答案: