Question

function $(selector) {

    var resultObject = {
        append: function (element) {
            var parser = new DOMParser();
            var dos = parser.parseFromString(element, "text/html");

            var all = dos.getElementsByTagName("body")[0];
       
            var elemWhichAppend = document.getElementsByTagName(selector);

            var children = all.childNodes;
   
            for (var i = elemWhichAppend.length-1; i >=0; i--) {

                var msgContainer = document.createDocumentFragment();
                var children = all.childNodes;

                for (var child = 0; child < children.length; child++) {
                    var al = children[child];
                    msgContainer.appendChild(al);
                }
                insertAfter(msgContainer, elemWhichAppend[i]);
            }
        }
    }

    return resultObject;
}

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
	<meta charset="utf-8" />
    <script src="jqueryjs.js"></script>
  </head>
  <body>
    <h1 class="testing">APPEND</h1>
    <p>Hallo, ich bin ein P TAG </p>
    <h1 class="testing">APPEND2</h1>
    <p>BADGL</p>
    <input type="button" value="append tag/text " onclick="$('p').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> messi ist scheiße');" />
  </body>
</html>

运行代码剪切。正如您所看到的，该函数仅向标签的最后一个p元素添加。并忘记'messiistschexiße'。我尝试了很多，但我无法找到我的错误。是因为'messiistschexiße'的文字是？

Answer 1

你这样做比它需要的更复杂。只需让append函数将你的字符串附加到元素的innerHTML上。

＆＃13;

function $(selector) {
    var resultObject = {
        append: function (element) {
            var elemWhichAppend = document.getElementsByTagName(selector);
            for (var i = elemWhichAppend.length-1; i >=0; i--) {
                elemWhichAppend[i].innerHTML += element;
            }
        }
    }
    return resultObject;
}

＆＃13;

<h1 class="testing">APPEND</h1>
<p>Hallo, ich bin ein P TAG </p>
<h1 class="testing">APPEND2</h1>
<p>BADGL</p>
<input type="button" value="append tag/text " onclick="$('p').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> messi ist scheiße');" />

＆＃13;

Answer 2

在div，p或h1标签中包装（messiistchexiße）就可以了。

<input type="button" value="append tag/text " onclick="$('p').append('<ul><li>RIBA RIBI<ul><li>FRANK RIBERY</li></ul></li></ul> <h1>NIGOGOG</h1> <p>messi ist scheiße</p>');" />

Answer 3

在JS小提琴测试中，我发现当你循环遍历子元素时，由于某种原因，你声称为'all'的变量似乎消失了，或者至少在性质上恶化到它的程度在第二个循环中不包含任何子元素，因此第二次循环不会包含子元素循环。

似乎提高性能的一件事是重新定义循环顶部的所有和dos：

for (var i = elemWhichAppend.length-1; i >=0; i--) {
     var dos = parser.parseFromString(element, "text/html");
     var all = dos.getElementsByTagName("body")[0];
     var msgContainer = document.createDocumentFragment();
     ...

这应该有所帮助，因为它确实解决了我所使用的JSFiddle。我不确定为什么'all'变量本质上正在改变，但它会改变 - 就像我从日志中看到的那样 - 只要你执行这一行：

msgContainer.appendChild(al);

我想在执行该行之后会发生这种情况，因为该行实际访问了'document'对象并导致它发生变化（因为msgContainer是从文档对象派生的）。

此外，您可能必须将'messi ist Shiese'包含在html标记中，作为行

var dos = parser.parseFromString(element, "text/html");

此行似乎只找到您提供的元素中的HTML元素。您可以通过尝试console.log来检查这个'child'元素本身，你会看到当你将'messi ist sheise'部分包含在标签中时，它会出现，但是当它不在时它就不会出现标签。

for (var child = 0; child < children.length; child++) {
     var al = children[child];
     console.log(children[child]);
     msgContainer.appendChild(al);
}

Answer 4

你错过了getElementsByTagName

附近的“”

不会将元素附加到第一个标记

4 个答案: