CODEWITHSUNDEEP
javascriptjqueryhtmlcss
KOUSIK MANDAL
KOUSIK MANDAL

Reputation: 2052

How to encapsulate CSS of dynamically set HTML in a div so that it does not affect outer elements?

I am in a situation where user can paste any HTML in a textbox. And then I have to manipulate that HTML, e.g, finding out all anchor tags or divs and many more.

To solve the purpose I have made a hidden div and setting the html of that div same as the pasted HTML.

var pastedHtml = $("#textbox-id").val();
$("#hiddendiv").html(pastedHtml);

Once this is done I have full access of that pasted HTML document as DOM element and can manipulate it easily using jQuery or Javascript.

Now the problem I am facing is if there is some kind of class or id or any other selectors which is same as the mother page, whenever I am setting the HTML into the hidden div my mother page is being affected.

So what I am trying somehow encapsulate the CSS style in the pasted HTML, so that it does not affect outer page.

The pasted HTML can contain inline styling (which is not a problem I think), style inside tag or even link from outside file. In fact it can be anything.

So it there any library or something available to do that? Or what should be my approach to solve the issue.

Any help will be very good for me.

Please let me know if any more data is required.

Thanks in advance.

Upvotes: 1

Views: 1617

Answers (2)

Asons
Asons

Reputation: 87191

If you are in control of assigning the CSS, simply use the hidden div's id when assigning the inner element a CSS.

With that they will generally have a higher specificity and override similar rules.

Sample stack snippet

#hiddendiv #div1 {
  color: red;
}

#hiddendiv .blue {
  color: blue;
}
<div id="hiddendiv">

  <!-- users elements -->

  <div id="div1">Hey, I'm red <span class="blue"> and I am blue </span></div>

</div>

If not, this post might be an alternative, where one isolate the inner elements

Upvotes: 1

jancha
jancha

Reputation: 4967

Use iframe. In that case the contents will be fully isolated from the main document.

Also using html(parsedHTML) would look quite insecure to me to use.

Janis

Upvotes: 1

Related Questions