Vanilla JavaScript - 在不使用 .innerHTML 的情况下将元素和 Txt 附加到元素

Question

element.append() 在 MS Edge 中不起作用

我想知道如何最好地创建一个新元素，然后将一个字符串附加到由其他元素和文本变量组成的字符串中？.append 方法似乎在 MS Edge 中不起作用 我得到的错误是：SCRIPT438：SCRIPT438：对象不支持属性或方法"追加">

这不是在不创建字符串然后附加到 parent.inner HTML 的情况下执行此操作的正确方法吗？

parent = document.createElement("h4");

txtNode = document.createTextNode("); txtNode.append("WHATEVER");

parent.appendChild(txtNode)：

提前致谢

// Const
const numCopyrightTxtYear = 2018;       
// Copyright Var
var elmCopyright = document.createElement("h4");
var elmCopyrightTxt = document.createTextNode("");
// Elements to append to elmCopyrightTxt
var elmTime = document.createElement("time");
var elmTimeTxt = document.createTextNode(numCopyrightTxtYear);
var elmCopyrightHolder = document.createElement("em");
var elmCopyrightHolderTxt = document.createTextNode("")
// Copyright
elmTime.dateTime = numCopyrightTxtYear;
elmTime.setAttribute("itemprop", "copyrightYear");
elmCopyrightHolder.setAttribute("itemprop", "creator copyrightHolder");
elmCopyrightHolder.appendChild(elmCopyrightHolderTxt);
elmCopyright.append("© ");
elmTime.appendChild(elmTimeTxt);
elmCopyright.append(elmTime);
elmCopyright.append(elmCopyrightHolder);
// This is the compleat code if I left somthing out??
function createHeaderFragment() {
// Main Fragment
var elmHeaderFragment = document.createDocumentFragment();
// Other Containers
var elmHeader = document.createElement("header");
// Values to Set
const strTitle = "Title";
const strCaption = "Caption";
const strSubjectOf = "SubjectOf";
const strLocation = "Location";
const strHashtags = "Hashtags";
const strKeywords = "Keywords";
const numCopyrightTxtYear = 2018;
// New Elements
// Title
var elmTitle = document.createElement("h2");
var elmTitleTxt = document.createTextNode(strTitle);
// Caption
var elmCaption = document.createElement("h3");
var elmCaptionTxt = document.createTextNode(strCaption);
// SubjectOf
var elmSubjectOf = document.createElement("h3");
var elmSubjectOfTxt = document.createTextNode(strSubjectOf);
// Location
var elmLocation = document.createElement("h3");
var elmLocationTxt = document.createTextNode(strLocation);
// Hashtags
var elmHashtags = document.createElement("h3");
var elmHashtagsTxt = document.createTextNode(strHashtags);
// Keywords
var elmKeywords = document.createElement("h3");
var elmKeywordsTxt = document.createTextNode(strKeywords);
// Copyright
var elmCopyright = document.createElement("h4");
var elmCopyrightTxt = document.createTextNode("");
var elmTime = document.createElement("time");
var elmTimeTxt = document.createTextNode(numCopyrightTxtYear);
var elmCopyrightHolder = document.createElement("em");
var elmCopyrightHolderTxt = document.createTextNode(" Evan Santé Photography")
// <img src= "/images/nav/grid1.jpg" alt= "Thumbnail Image" itemprop= "hasPart image thumbnail" />
//var objHeaderImage = document.createElement("img");
// Set Element Nodes
elmTitle.setAttribute("itemprop", "headline");
elmTitle.appendChild(elmTitleTxt);
elmCaption.setAttribute("itemprop", "caption");
elmCaption.appendChild(elmCaptionTxt);
elmSubjectOf.setAttribute("itemprop", "subjectOf");
elmSubjectOf.appendChild(elmSubjectOfTxt);
elmLocation.setAttribute("itemprop", "contentLocation");
elmLocation.appendChild(elmLocationTxt);
elmHashtags.setAttribute("itemprop", "keywords");
elmHashtags.appendChild(elmHashtagsTxt);
elmKeywords.setAttribute("itemprop", "keywords");
elmKeywords.appendChild(elmKeywordsTxt);
// Copyright
elmTime.dateTime = numCopyrightTxtYear;
elmTime.setAttribute("itemprop", "copyrightYear");
elmCopyrightHolder.setAttribute("itemprop", "creator copyrightHolder");
elmCopyrightHolder.appendChild(elmCopyrightHolderTxt);
elmCopyright.append("© ");
elmTime.appendChild(elmTimeTxt);
elmCopyright.append(elmTime);
elmCopyright.append(elmCopyrightHolder);
// Append To Header
elmHeader.appendChild(elmTitle);
elmHeader.appendChild(elmCaption);
elmHeader.appendChild(elmSubjectOf);
elmHeader.appendChild(elmLocation);
elmHeader.appendChild(elmHashtags);
elmHeader.appendChild(elmKeywords);
elmHeader.appendChild(elmCopyright);
return elmHeaderFragment.appendChild(elmHeader);
}

Answer 1

append是相当新的，并非所有浏览器都支持。但是，MDN 页面有一个填充代码，您可以在 IE9-IE11 和大概的 Edge 上使用。

如果您不使用填充物，则您正在寻找的内容appendChild(spec |MDN) 或insertBefore(spec |MDN)，你在父节点上调用它，传入要附加的节点。

var parent = document.createElement("h4");
parent.appendChild(
document.createTextNode("WHATEVER")
);
// ...presumably you `.appendChild(parent)` at some point...

现场示例：

var parent = document.createElement("h4");
parent.appendChild(
document.createTextNode("WHATEVER")
);
document.body.appendChild(parent);

appendChild总是在父项的末尾添加。insertBefore在您指定的另一个节点之前添加(如果您为另一个节点提供null则在末尾添加)。

---

话虽如此，innerHTML是普遍支持的，浏览器在读取标记并将其转换为 DOM 节点方面非常快。当您想要将复杂的东西用作元素的内容时，没有理由不使用innerHTML。当然，在其他情况下，你需要appendChild、insertBefore和其他 DOM 方法。

---

在评论中，您说要将文本附加到现有文本节点： 如果是这样，只需添加到nodeValue：

setTimeout(function() {
var d = document.getElementById("target");
var txt = d.firstChild;
txt.nodeValue += " more text";
}, 800);

<div id="target">existing text</div>