如何在js/jquery中獲取html標籤的內部html？

Question

，比如我有：

<p class="question"> 
this is my paragraph 
    <p> And i'm inside 
    tag in question class 
    <h1> And this is my heading</h1> 
    </p> 
</p> 

的問題是，我怎樣才能得到問題類的內部HTML象下面這樣：

this is my paragraph 
<p> And i'm inside tag in question class 
    <h1> And this is my heading</h1> 
</p> 

Answer 1

您可以使用：

$(".question").text() 

或者：

$(".question").html() 

Try it in JSFIDDLE。

Answer 2

有2個函數來獲取的元素的內部HTML

1. .text()
2. .html()

的.text（）

console.log($(".question").text()); 

.text()將GI已經在元素的innerText而不是標籤

的.html（）

console.log($(".question").html()); 

.html()功能這將給內標籤也。

this is my paragraph <p> And i'm inside 
tag in question class <h1> And this is my heading 
</h1> </p> 

在你的情況.html()將被罰款

Answer 3

jQuery是不是必需的。

您需要Element.innerHTML函數。 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

如果頁面上只有一個實例，我會建議使用ID而不是類。

myString = document.getElementById('id').innerHTML;

Answer 4

嵌套段落的是壞的。

w3.org狀態：

的<p>元素表示一個段落。它不能包含塊級別 元素（包括<p>本身）。

所以

console.log($('.question').html()); 

或

console.log(document.getElementsByClassName("question")[0].innerHTML); 

將只獲取 「這是我第」

---

建議的解決方案：

將您的內容封裝在div中，然後訪問HTML。可以通過各種方法訪問innerHTML，這裏很少有。

1. querySelector()：document.querySelector('.question').innerHTML
2. getElementsByClassName()：console.log(document.getElementsByClassName("question")[0].innerHTML);。 getElementsByClassName（）將返回一個匹配元素的數組，所以我使用索引來訪問第一個元素。
3. getElementById()：document.getElementById(id).innerHTML

實施例：

var t = document.getElementsByClassName("question"); 
 
console.log(t[0].innerHTML);

<div class="question"> 
 
    this is my paragraph 
 
    <div>And i'm inside tag in question class 
 
    <h1> And this is my heading</h1> 
 
    </div> 
 
</div>

Answer 5

As per w3c docs：

如果p元素之後緊跟地址，文章，旁邊，blockquote，dir，div，dl，fieldset，footer，form，h1，h2，h3，h4，h5，h6，則可以省略p元素的結束標記，header，hr，menu，nav，ol，p，pre，section，table或ul元素，或者父元素中沒有更多內容，並且父元素不是元素。

因爲你的HTML中包含P，其作爲結束標記內p標籤和標籤p只包含這麼多文本。由於p標記基於文檔關閉，因此</p>在此處沒有任何作用。雖然p標籤允許的內容是phrasing contents。

---

可以使用 div代替 p標籤，使之有效，並得到使用DOM元素的 innerHTML財產HTML內容。

console.log(
 
    document.querySelector('.question').innerHTML 
 
);

<div class="question"> 
 
    this is my paragraph 
 
    <div>And i'm inside tag in question class 
 
    <h1> And this is my heading 
 
</h1> 
 
    </div> 
 
</div>

Answer 6

謝謝大家給我的建議。 但我解決我的問題只是覆蓋問題類與款類似的

<div class="outer"> 
<p class="question"> 
this is my paragraph<p>hello world</p> <p> And i'm inside 
tag in question class <h1> And this is my heading 
</h1> </p></p> 
</div> 

div標籤和使用 $('.outer').html(); 它打印的所有內部HTML。