2017-11-15 24 views
-1

私はプレーンJavaスクリプトを使用して変数内のコンテンツをプルしようとしています。 idの変数の一部だけを取得しようとしています。 この例では、id 'container'というhtmlの一部のみを取得しようとしています。Javascriptはidから変数からコンテンツを取得します

マイフィドル https://jsfiddle.net/a2ngc9jv/2/

var htmlPage = ` 
<html> 
<div> 
testing but not required 
</div> 
    <div id="container"> 
    <p> 
    i want to pull this whole block from parent 
    </p> 
    <p> 
     test 2 
    </p> 
    </div> 

</html>`; 

console.log(htmlPage.getElementById("container")) 
console.log(document.getElementById("container")) 
+0

。 –

+0

HTMLが単なるjavascript文字列である場合、その上で呼び出せる 'getElementById'メソッドはありません。また、パーツを「引っ張る」という意味が明確ではありません。 – ValLeNain

+0

これをブラウザやNodeのようなものでやろうとしていますか? –

答えて

1

あなたは本当のDOMオブジェクトにこれを有効にするDOMparser()を使用することができ、ブラウザにいる場合は、あなたが欲しいメソッドを呼び出すことができますそこから要素を得る。あなたは `htmlPage`は、DOM要素に変換しない限り、仕事に行くのではありません

var htmlPage = ` 
 
<html> 
 
<div> 
 
testing but not required 
 
</div> 
 
    <div id="container"> 
 
    <p> 
 
    i want to pull this whole block from parent 
 
    </p> 
 
    <p> 
 
     test 2 
 
    </p> 
 
    </div> 
 

 
</html>`; 
 

 

 
var parser=new DOMParser(); 
 
var htmlDoc=parser.parseFromString(htmlPage, "text/html"); 
 

 
console.log(htmlDoc.getElementById("container")) 
 
console.log(htmlDoc.getElementById("container").innerHTML)

+0

dom parserが定義されていないと表示されます。他に何かを追加する必要がありますか? – Kurkula

+0

@Kurkulaこれをどのブラウザで実行していますか?上記のスナッパーはあなたのために走りますか? –

+0

jsfiddleでは動作しますが、chromeでは動作しません。 – Kurkula

1

HTMLページの文字列ではない文書ノードです。しかし、それは一つにそれを置くのは簡単です:

var htmlPage = ` 
 
<html> 
 
<div> 
 
testing but not required 
 
</div> 
 
    <div id="container"> 
 
    <p> 
 
    i want to pull this whole block from parent 
 
    </p> 
 
    <p> 
 
     test 2 
 
    </p> 
 
    </div> 
 

 
</html>`; 
 

 
// it might not be "allowed" to put a html tag inside a div but it works for this purpose. 
 
var n = document.createElement('div'); 
 
n.innerHTML = htmlPage; 
 

 
var content = n.querySelector('#container p:first-child').innerHTML; 
 

 
console.log(content);

+0

[DOMParser]もあります。 (https://stackoverflow.com/questions/3103962) –

関連する問題