Javascript從文本中獲取元素

Question

我有包含HTML元素的文本。例如像這樣

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

我希望得到一些元素的innerHTML使用類似這樣的例子

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

JavaScript是有可能這樣的文字？或者像這樣的其他方式？

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)