如何在js / jquery中获取html标签的内部html？

Question

For example i have:

<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>

the question is how can i get inner html of question class like below:

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

Answer 1

There are 2 functions to get the inner html of an element

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

.text()

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

.text() will give the innertext of the element but not tags

.html()

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

.html() function this will give the inner tags also.

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

In your case .html() would be fine

Answer 2

As per w3c docs :

A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is not an a element.

Since your HTML contains p tag within p which act as end tag and that p tag only contains that much text. The </p> doesn't have any role here since p tag is closed based on the documentation. Although the p tag permitted contents are phrasing contents .

---

You can use div instead of p tag to make it valid and get HTML content using innerHTML property of dom element.

 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 3

You can use:

$(".question").text()

Or:

$(".question").html()

Try it in JSFIDDLE .

Answer 4

jQuery is not required.

You need the the Element.innerHTML function. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

I would suggest using an ID instead of a class if there is only one instance on the page.

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

Answer 5

Nesting paragraph's is bad.

w3.org states :

The <p> element represents a paragraph. It cannot contain block-level elements (including <p> itself).

So

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

or

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

would fetch only " this is my paragraph "

---

Proposed Solution:

Instead wrap your content in a div and then access the HTML. innerHTML can be accessed by various methods here are few of them.

1. querySelector() : document.querySelector('.question').innerHTML
2. getElementsByClassName() : console.log(document.getElementsByClassName("question")[0].innerHTML); . getElementsByClassName() will return an array of matched elements so i used index to access the first elemnent.
3. getElementById() : document.getElementById(id).innerHTML

Example:

 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 6

Thank you all of you for giving me suggestion. but i solved my problem just covered question class paragraph with a div tag like that

<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>

and by using $('.outer').html(); it print all inside html.