时间戳

首页 > 解决方案 > appendChild 代码不计算在 createTextNode 中编写的 HTML 代码

javascript - appendChild 代码不计算在 createTextNode 中编写的 HTML 代码

问题描述

我需要附加一个标题为“幸运！”的单独 div 作为另一个 div 元素的子元素。我已经在 createTextNode 事件中编写了确切的代码，但它没有计算确切的代码。

我尝试过使用不同的事件处理程序或在不同的地方编写 JavaScript，但那时什么都不会显示。

function function2() {
    var childtype  = document.createElement("div");
    var childcontent = document.createTextNode("<div title='Lucky!'>See you!</div>");
    childtype.appendChild(childcontent);
    document.getElementById("div1").appendChild(childtype);
}
function2()

它写入<div title='Lucky!'>See you!</div>而不是仅See you!使用属性。

标签： javascriptdom

解决方案

您必须分别创建两个节点并设置内部节点的文本。setAttribute()然后，您可以在您创建的节点上添加标题。

function function2() {
    var outer = document.createElement("div");
    var inner = document.createElement("div");
    var childcontent = document.createTextNode("See you!");
    inner.appendChild(childcontent);
    inner.setAttribute( 'title', 'Lucky!' );
    outer.appendChild(inner);
    document.body.appendChild(outer); 
}
function2();

如前所述，替代方法是使用 innerHTML，因为它会解析 HTML：

function function2() {
    var childtype = document.createElement("div");
    childtype.innerHTML = "<div title='Lucky!'>See you!</div>";
    document.getElementById("div1").appendChild(childtype);
}
function2();
<div id="div1"></div>

推荐阅读