Develop Reference

JavaScript: How to replace code within element without innerHTML

I want to replace content within element in JavaScript but I cannot use innerHTML and jQuery.
For example:
<div id="MyID">
<b>Hi,</b> how are you?<br/>
I am fine.
</div>
I want to replace everything between <div id="MyID"> and </div>.
Like via innerHTML which I sadly cannot use:
document.getElementById('MyID').innerHTML = document.getElementById('MyID').innerHTML.replace(/you/, 'you');
Which will be:
<div id="MyID">
<b>Hi,</b> how are you?<br/>
I am fine.
</div>
How to do it?
I tried things like appendChild and removeChild but I still cannot figure it out.

For appendChild, you should append a dom entity

Use remove() to clear the existing content and then insertAdjacentHTML() to enter the new content. Here is your code sample as an example.
<div id="MyID">
<span id="MyID2">
<b>Hi,</b> how are you?<br/>
I am fine.
</span>
</div>
<button onclick="myFunction()">Insert a paragraph</button>
<script>
function myFunction() {
var a = document.getElementById("MyID2");
a.remove();
var b = document.getElementById("MyID");
b.insertAdjacentHTML('afterbegin', '<b>Hi,</b> how are you?<br/>I am fine.');
}
</script>

Show all dropzone errors instead of one at a time [duplicate]

I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.

Try:
$("#region_North_America").append(row_str);
using append().

Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.

Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);

Remove div and its content from html string

Lets say i have a string like this:
<div id="div1"></div>
<div class="aClass" id="div2">
<div id="div3" class="anotherClass"></div>
<div id="div4" />
</div>
<div id="div5"></div>
I want to remove div2 from the string and everything inside that div
So i got a string like this
<div id="div1"></div>
<div id="div5"></div>
I thinking something like using regex to find the first div with the id of "div2" or whatever the id of the div is and count brackets untill it gets to "< /div>". The problem is that the "div3" also got a "< /div>" at the end.
The content of the div i want to remove may contain more or less div's then this too.
Any ideas on how to code this?
Update:
var htmlText = editor3.getValue();
var jHtmlObject = jQuery(htmlText);
jHtmlObject.find("#div2").remove();
var newHtml = jHtmlObject.html();
console.log(newHtml);
Why doesn't this return anything in the console?
Update2!:
I have made a jsFiddle to make my problem visual..
http://jsfiddle.net/WGXHS/

Just put the string into jQuery and use find and then remove.
var htmlString = '<div id="div1"></div>\
<div class="aClass" id="div2">\
<div id="div3" class="anotherClass"></div>\
<div id="div4" />\
</div>\
<div id="div5"></div>';
var jHtmlObject = jQuery(htmlString);
var editor = jQuery("<p>").append(jHtmlObject);
editor.find("#div2").remove();
var newHtml = editor.html();

If you have access to jQuery and your HTML is part of the DOM you can use $.remove()
EG. $('#div2').remove();
If it's not part of the DOM, and you have it in a string, you can do something like:
$('#div2', $(myHTML)).remove();

jQuery .remove() will do
$("#div2").remove();

The regex option would work if you control generating the string so you can ensure things like order of the attributes and indentation. If not your best bet is to use an HTML parser. If you are working inside of a browser jQuery is a good option. If you are working server-side you'll need to find a parser for the language you chose.

mootools replace the content of a div

i have the following HTML code
<div id="myDiv">
<p>content</p>
</div>
and the following JS code:
$('myDiv').set('html',htmlCode);
the problem is that the variable htmlCode is something like:
<div id="myDiv"><p>another content</p></div>
so, the result when i run the JS code is something like:
<div id="myDiv">
<div id="myDiv">
<p>another content</p>
</div>
</div>
is there a way to use "set" so that it overrides the entire div? or another solution to get something like:
<div id="myDiv">
<p>another content</p>
</div>
as the result from the JS script?
i know i could just change the variable htmlCode... i just was wondering if there's another solution to this.

Mootools offers a simple replaces method!
//new tmp element that contains the new div
var tmpDiv = new Element('div',{html:'<div id="myDiv"><p>another content</p></div>'});
//new div (first child of my tmp div) replaces the old 'myDiv' (that can be grabbed from the DOM by $)
tmpDiv.getFirst().replaces($('myDiv'));

String.implement({
replaces: function(toReplace) {
Elements.from(this).inject(toReplace, 'after');
toReplace.destroy();
}
});
'<div id="a"><p>ipsum</p></div>'.replaces($('a'));
This should do. Example: http://jsfiddle.net/UvuwG/

$('myDiv').empty();
$('myDiv').adopt(Elements.from(htmlCode).getElement('p'));

You can do
$("myDiv").getParent().set("html", htmlCode);

How to keep jQuery from parsing inserted HTML?

Does anyone know how to stop jQuery fromparsing html you insert through before() and after()? Say I have an element:
<div id='contentdiv'>bla content bla</div>
and I want to wrap it in the following way:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
I use the following jQuery/Javascript
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
$(this).before(beforeHTML);
$(this).after(afterHTML);
}
This however will not result in the correct wrapping, it will create:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
</div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
Using wrap() won't work either since that gets jQuery even more mixed up when using:
$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");
How should I solve this?
Thanks in advance!

$('#contentDiv').each(function() {
$(this).wrap('<div id="wrapperDiv">');
$(this).before('<div id="beforeDiv">');
$(this).after('<div id="afterDiv">');
});
produces:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>

your markup isn't complete...before and after are to take complete nodes only...
what you are trying to do is wrap your content, which is different.
you want this:
.wrap(html);
http://docs.jquery.com/Manipulation/wrap#html

I think you're approaching it wrong. Think about what you actually want to achieve...
You want to WRAP everything with one div. Then insert 1 div before, and 1 div after.
so do .wrap() first, then append before and after-divs relative to the content-div.
if you happen to have the actual HTML as a string (from an XHR or something) then you need to read out the html and concatenate it yourself as Douglas Mayle suggested.

I'm sorry, but this one should be obvious. In your case, you can't use wrap because it sticks the original node into the deepest node it finds in the wrapping HTML. You don't want that. Instead, read out the HTML from your object and combine it with what you have:
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
// This line below will do it...
$(this).html(beforeHTML + $(this).html() + afterHTML);
}