Question

我的文字包含HTML元素。例如像这样

<div>
    <div>content</div>
    <div>
         <div id="myId">
            <p>
                <span>content</span>
                <span>content</span>
            </p>
        </div>
    </id>   
</div>

我希望使用javascript（如此示例

）获取此文本中某些元素的innerHTML

// HTML variable contain above HTML text
var innerHTML = HTML.getElementById('myId').innerHTML;

有可能吗？或者像这样的其他方式？

Answer 1

您可以使用document fragment。

var HTML = "<div>\
    <div>content</div>\
    <div>\
         <div id=\"myId\">\
            <p>\
                <span>content</span>\
                <span>content</span>\
            </p>\
        </div>\
    </div>\
</div>";

// create a fake document
var df = document.createDocumentFragment();

// create a placeholder node to hold the innerHTML
var el = document.createElement('body');
el.innerHTML = HTML;

// append to the document fragment
df.appendChild(el);

// execute .getElementById
console.log(df.getElementById('myId').innerHTML);

Answer 2

根据您的字符串创建一个新元素，如此问题中所述：Creating a new DOM element from an HTML string using built-in DOM methods or prototype。

之后，您可以使用您想要的任何DOM方法操作新的子树。除非您想使用依赖于实际渲染的方法，否则您无需将其实际附加到页面。

var HTML =
'<div>\
    <div>content</div>\
    <div>\
         <div id="myId">\
            <p>\
                <span>content</span>\
                <span>content</span>\
            </p>\
        </div>\
    </id>\
</div>';

var elements = document.createElement('div');
elements.innerHTML = HTML;
var targetElement = elements.querySelectorAll("#myId");

console.log(targetElement)

Javascript从文本中获取元素

2 个答案: