3 Replies - 298 Views - Last Post: 15 May 2017 - 03:41 AM

#1 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

HTML Inside of Element

Posted 11 May 2017 - 12:45 PM

I am using Quill text editor which has a DOM element, more specifically a div, that provides rich text capabilities. Whenever the user clicks a submit button, I want to get the HTML inside of the div element, but I cannot figure out how to get the html that is in the element.

Whenever I try to get the html like this:
$('#btnSaveAdvancedTextBox').on('click', function() {
    console.log($('#editor').html());
});


It gives me the whole HTML including the div element that represents the text editor, like this:
<div class="ql-editor" contenteditable="true" style="white-space: pre-wrap;"><p><s>this</s> <strong>is</strong> <span style="color: rgb(161, 0, 0);">a</span> <u>test</u></p></div><div class="ql-clipboard" contenteditable="true" tabindex="-1"></div><div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a></div>


But whenever I try to get the text like this:
$('#btnSaveAdvancedTextBox').on('click', function() {
    console.log($('#editor').text());
});


It gives me the text without the markup like this:
this is a test


How can I get the HTML inside of an element without including the HTML of the element itself?

Edit - I'm sorry this thread it resolved. I was able to get it to work by using:
$('#btnSaveAdvancedTextBox').on('click', function() {
    console.log($('#editor *').html());
});

This post has been edited by dday9: 11 May 2017 - 12:47 PM


Is This A Good Question/Topic? 0
  • +

Replies To: HTML Inside of Element

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,073
  • Joined: 08-June 10

Re: HTML Inside of Element

Posted 12 May 2017 - 12:54 AM

Quote

How can I get the HTML inside of an element without including the HTML of the element itself?

.html() (as you have done). if you look at your received HTML you won't find the ID editor anywhere--proof that the element's own HTML was not included.

That the Editor is made out of a multitude of elements is a completely different matter.

Quote

But whenever I try to get the text like this: [...] It gives me the text without the markup like this:

that's how it is supposed to work.
Was This Post Helpful? 0
  • +
  • -

#3 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: HTML Inside of Element

Posted 12 May 2017 - 09:49 AM

I don't know if you saw my edit or not, but I was able to solve the issue by using the * wildcard to get all element's HTML.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,073
  • Joined: 08-June 10

Re: HTML Inside of Element

Posted 15 May 2017 - 03:41 AM

'#editor .ql-editor' would be the correct selector, as that element is the one you're interested in.

the reason it works for you with * is that:

http://api.jquery.com/html/ said:

If the selector expression matches more than one element, only the first match will have its HTML content returned.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1