如果没有jQuery，这段代码的并行性是什么

What is the parallel of this code without jQuery?

本文关键字：代码 并行性 是什么 jQuery 段代码 如果没有      更新时间：2023-11-11

我需要用纯JavaScript重写这段代码，即不使用jQuery。它获取div的内容，并将其添加到另一个div中的第一个图像之后。

 $(document).ready(function() {
    var teksti = $('#inside1').html();
    $('<div id="inside1">' + teksti + '</div><div style="clear:both;"></div>').insertAfter("#artikull > p > img:first");
    });

如果你只需要支持现代浏览器，它并不太复杂：

// $(document).ready(function() {
document.addEventListener("DOMContentLoaded", function() {
    // var teksti = $('#inside1').html();
    var teksti = document.getElementById('inside1').innerHTML;
    // $('<div id="inside1">' + teksti + '</div><div style="clear:both;"></div>')
    //     .insertAfter("#artikull > p > img:first");
    document
        .querySelector('#artikull > p > img')
        .insertAdjacentHTML(
            'afterend',
            '<div id="inside1">' + teksti + '</div><div style="clear:both">'
        );
// });
});

原始jQuery中大致相同的行在注释中。

不过我有点困惑；您提供的代码将创建一个与原始元素具有相同ID的元素，并最终在p中包含几个div，从而产生一个有点变形的DOM。你不是更喜欢简单地包装现有元素并移动它，而不是创建一个内容完全相同的新元素吗？你不应该把它移动到接受块级子元素的地方吗？

function adddiv(){
    var teksti = document.getElementById('inside1').innerHTML;
    var div = document.getElementById('artikull');
        var imazh = div.getElementsByTagName("img")[0];
        imazh.outerHTML = imazh.outerHTML + teksti;
}

下面的代码应该在现代浏览器和IE版本9中兼容。

document.addEventListener("DOMContentLoaded", function (e) {
    var insideHTML = '<div id="inside1">' + window.document.getElementById('inside1').innerHTML + '</div><div style="clear:both;"></div>',
        artikullElement = window.document.getElementById('artikull'),
        pElements = (function (nodes) {
            var results = [],
                node;
            for (var i = 0, iLen = nodes.length; i < iLen; i++) {
                node = nodes[i];
                // Get all children P tags
                if (node.nodeValue === 1 && node.tagName === "P")
                    results.push(node);
            }
            return results;
        })(artikullElement.childNodes),
        imgElement = (function (nodes) {
            var node;
            for (var i = 0, iLen = nodes.length; i < iLen; i++) {
                // Get the first child tag image found in any of the P tags
                if (node.nodeValue === 1 && node.tagName === "IMG")
                    return node;
            }
        })(pElements);
    if (imgElement) {
        if (imgElement.insertAdjacentHTML)
            imgElement.insertAdjacentHTML('beforeEnd', insideHTML);
        else {
            var range = window.document.createRange(),
                docFragment = range.createContextualFragment(insideHTML);
            imgElement.parentNode.insertBefore(docFragment, imgElement.nextSibling);
        }
    }
});
相关文章：