Databases
StackOverflow2013
Postsdbo
POAppend html to jQuery element without running scripts inside the html
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAppend html to jQuery element without running scripts inside the html
    primarykey
    data
    text
    <p>I have written some code that takes a string of html and cleans away any ugly HTML from it using jQuery (see an early prototype in <a href="https://stackoverflow.com/questions/5337809/is-it-wise-to-use-jquery-for-whitelisting-tags-are-there-existing-solutions-in-j">this SO question</a>). It works pretty well, but I stumbled on an issue:</p> <p>When using .append() to wrap the html in a div, all script elements in the code are evaluated and run (see <a href="https://stackoverflow.com/questions/610995/jquery-cant-append-script-element/3603496#3603496">this SO answer</a> for an explanation why this happens). I don't want this, I really just want them to be removed, but I can handle that later myself as long as they are not run.</p> <p>I am using this code:</p> <pre><code>var wrapper = $('&lt;div/&gt;').append($(html)); </code></pre> <p>I tried to do it this way instead:</p> <pre><code>var wrapper = $('&lt;div&gt;' + html + '&lt;/div&gt;'); </code></pre> <p>But that just brings forth the "Access denied" error in IE that the append() function fixes (see the answer I referenced above).</p> <p>I think I might be able to rewrite my code to not require a wrapper around the html, but I am not sure, and I'd like to know if it is possible to append html without running scripts in it, anyway.</p> <h2>My questions:</h2> <ul> <li><p>How do I wrap a piece of unknown html without running scripts inside it, preferably removing them altogether?</p></li> <li><p>Should I throw jQuery out the window and do this with plain JavaScript and DOM manipulation instead? Would that help?</p></li> </ul> <h2>What I am not trying to do:</h2> <p>I am not trying to put some kind of security layer on the client side. I am very much aware that it would be pointless.</p> <h2>Update: James' suggestion</h2> <p>James suggested that I should filter out the script elements, but look at these two examples (the original first and the James' suggestion):</p> <pre><code>jQuery("&lt;p/&gt;").append("&lt;br/&gt;hello&lt;script type='text/javascript'&gt;console.log('gnu!'); &lt;/script&gt;there") </code></pre> <p>keeps the text nodes but writes gnu!</p> <pre><code>jQuery("&lt;p/&gt;").append(jQuery("&lt;br/&gt;hello&lt;script type='text/javascript'&gt;console.log('gnu!'); &lt;/script&gt;there").not('script'))` </code></pre> <p>Doesn't write gnu!, but also loses the text nodes.</p> <h2>Update 2:</h2> <p>James has updated his answer and I have accepted it. See my latest comment to his answer, though.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USPeter Jaric
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAppend html to jQuery element without running scripts inside the html
      1. USJean-Baptiste
      1. VTFavorite
    2. VO
      singulars
      1. POAppend html to jQuery element without running scripts inside the html
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POAppend html to jQuery element without running scripts inside the html
      1. USStan
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload