JavaScript在段落中的页面加载后添加文本

JavaScript adding text after pageloads in a paragraph

本文关键字：加载 添加 文本 段落中 JavaScript      更新时间：2023-12-12

HTML（无法更改）：

<fieldset>
   <legend>Question 8</legend>
      <p>
        Create a new "p" element with the text "New Element", and add it to #question-8
      </p>
      <div id="question-8"></div>
    </fieldset>

JavaScript:

var node = document.createElement('p');
node.setAttribute('id', 'q8');
var content = document.createTextNode("New Element");
node.appendChild(content);
console.log(node);

我正在尝试让文本新元素显示在ID为q8的段落中。我必须使用不显眼的JavaScript。在我的控制台窗口中，它显示正确，但它不会出现在我的HTML中。如何使其显示？

类似的东西应该会起作用。

只有在加载了整个文档后，代码才会运行。

它将通过id获取有问题的元素，然后向其附加一个段落元素，从而获得一个附加了所需内容的文本节点。

由于appendChild返回子节点，因此我们需要获取其parentElement以传递给上层appendChild调用。

document.addEventListener('readystatechange', function(event) {
    if (event.target.readyState !== "complete") {
        return;
    }
    document.getElementById('question-8')
    .appendChild(document.createElement('p')
    .appendChild(document.createTextNode('New Element')).parentElement);
}, false);

这可能是最容易做到的：

var doc = document, bod = doc.body; // never use document or document.body again
function E(e){
  return doc.getElementById(e); // never use document.getElementById() again
}
E('question-8').innerHTML = "<p id='q8'>New Element</p>";

当然，你可以这样做：

var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
function C(t){
  return doc.createElement(t);
}
var q8 = C('p'), txt = doc.createTextNode('New Element'), qest8 = E('question-8');
q8.id = 'q8', q8.appendChild(txt); quest8.appendChild(q8);
相关文章：