Question

element.append（）在MS Edge中不起作用

我想知道创建一个新元素然后在其中添加一个由其他元素和文本变量构成的字符串的最佳方法是什么？ .append方法似乎在MS Edge中不起作用我得到的错误是：SCRIPT438：SCRIPT438：对象不支持属性或方法＆＃39;追加＆＃39;

这不是正确的方法，不创建字符串然后附加到parent.inner HTML ??

parent = document.createElement（＆＃34; h4＆＃34;）;

txtNode = document.createTextNode（＆＃34;＆＃34;）; txtNode.append（“无所谓”）;

parent.appendChild（txtNode）：

提前致谢

＆＃13;

// 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);
        }

＆＃13;

Answer 1

append相当新，并不是所有浏览器都支持。但是，MDN页面有一个polyfill，你可以在IE9-IE11上使用它，大概是Edge。

如果您不使用填充物，那么您正在寻找的是appendChild（spec | MDN）或insertBefore（{{ 3}} | spec），你在父节点上调用，传入要追加的节点。

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

直播示例：

＆＃13;

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

＆＃13;

appendChild总是在父级的末尾添加。 insertBefore在您指定的另一个节点之前添加（或者如果您为另一个节点提供null，则在最后添加）。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Vanilla JavaScript - 在不使用.innerHTML

1 个答案: