I have a HTML content like this:
some of the string content <font color=blue>Test content <BR><BR><BR>
<DIV id='idOfTheDiv'>
some more goes here
<P>Test Content</P>
</DIV>
</font>
I want to remove the div without removing it's content, so the resultant data should look like
some of the string content `<font color=blue>Test content <BR><BR><BR>`
some more goes here
<P>Test Content</P>
</font>
Please note that i do not want to remove the content of the div, also i do not want to add any unwanted HTML element just to remove the div. I have tried various techniques but none of them is working at the moment.
I tried this replacing the innerHTML but it did'nt worked. I can not use replaceChild, as
<DIV id='idOfTheDiv'>
some more goes here
<P>Test Content</P>
</DIV>
is a combonation of text plus HTML so CreateTextNode does'nt workks here as it changes all HTML to plain text.
Please suggest. Thanks a Ton..
Loop over the elements inside the div (use childNodes as it also includes text nodes, while children does not).
Place the elements one-by-one before the div using insertBefore.
Remove the div using removeChild.
This will do the trick:
var el = document.getElementById('idOfTheDiv');
while (el.childNodes.length) {
el.parentNode.insertBefore(el.childNodes[0], el);
}
el.parentNode.removeChild(el);
Demo: http://jsfiddle.net/VG5ZF/
el.parentNode.insertBefore(el.childNodes[0], el); moves the first child node outside from element, reducing the length of childNodes NodeList. So in every iteration el.childNodes[0] is going to be next one. Until there are childs.
Related
For example, if I have
<div>
<h2>Name</h2>
<h3>age</h3>
<span class='fa fa-trash'></span>
</div>
and when clicking the span (icon) I say
this.parentNode.childNodes[1].innerText
it would target the Name but if I say
this.parentNode.childNodes[2].innerText
it would not target Age. why is this? Is there a resource that explains this well? I know the indexing doesn't start at 0 but I don't understand how the indexing work.
DOM is not just the elements you see in your HTML code. In-between each element is a "text node" where text can be displayed. An example of this would be having text in a div below a a header. So...
<div>
<!-- Index 0: Text node -->
<h1>Header Text</h1> <!-- Index 1: Element -->
Description Text <!-- Index 2: Text node -->
</div>
As you can see, you are allowed to insert text in the div without wrapping it in an element. These are called text nodes which you see when you put the text in normal text elements (such as span or p) or buttons (<button>TEXT</button>). So to get around this in you JavaScript code, you could either do it the lazy way;
document.getElementById("ELEMENT_ID").childNodes[INDEX*2 + 1]
or by using the children property;
document.getElementById("ELEMENT_ID").children[INDEX]
The problem with this method is that it only returns 'element' children within the div, so the description text in the above HTML example will not be accessible. ([H1] instead of [Text, H1, Text]), but I suppose that is what you're looking for anyway. :)
I have prepended one div inside some div with many others:
<div class="content">
<div>sss</div>
<div>aaa</div>
<div>bbb</div>
</div>
I added <div>ddd</div> before sss with:
$('.content').prepend('<div></div>');
And when I want to append some new element to new prepended div it add's it as text:
$('.content>div')[0].append('<p>ddd</p>');
If I remove [0] it works but it appends to all divs, I need that [0] to find first div.
To get the first element (that is still a jquery object) you can use .first():
$('.content>div').first().append($('<p>ddd</p>'));
Note that I also wrapped the <p> with $(...) to make it a valid html element (and not text).
I am using jQuery. I have the following html fragment:
<h1>Main Title</h1>
<h2>One header</h2>
<p>some text</p>
<p>more text</p>
<ul><li>a list</li></ul>
<h2>Another header</h2>
one link
<h3>ddd</h3>
<p>eee</p>
<h2>Header 3<h2>
<p>This is a Paragraph</p>
I need to get the content that is between every h2 element, in order to do something like this:
First Section text
some text
more text
Second section text
one link
ddd
eee
Third section text
This is a Paragraph
I've read this resource:
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
but still cannot figure how to do what I need.
Thanks in advance!
I'd suggest the following:
$('h2').each(function(){
var self = $(this),
// gets everything between the $(this) and the next 'h2' element:
contents = self.nextUntil('h2'),
/* creates a new div with which to wrap,
and inserts after the current $(this): */
newWrap = $('<div />').insertAfter(self);
// appends the contents to the new div element:
newWrap.append(contents);
});
JS Fiddle demo.
While the above works, for its intended use, and illustrates nextUntil() (which is definitely the method to use in this scenario), I'm unsure how I might show you how to achieve your aims, since you seem to have left your use-case/requirements rather vague.
References:
append().
each().
insertAfter().
nextUntil().
I believe the nextUntil method is what you're looking for.
http://api.jquery.com/nextUntil/
A good solution would be to put the content you wish to retrive in a <div> tag with an id, and use jQuery to retrive it's content like so: $('#divid').text()
I am attempting to put together a java script that, upon a user's selection of some text inside a specific div id, will return that selection's start and end indices ignoring internal html tags.
Consider the following example:
<p>Some text that will be ignored</p>
<div id="X">
<p>Here is some text that should be considered</p>
<p>Here is a bit more <span>tex</span>t in a separate paragraph but the same div id</p>
</div>
Now, If I highlight be considered. Here is and use
var currentRange = window.getSelection().getRangeAt(0);
console.log('startContainer\t'+currentRange.startContainer);
console.log('startOffset\t'+currentRange.startOffset);
console.log('endContainer\t'+currentRange.endContainer);
console.log('endOffset\t'+currentRange.endOffset);
console.log('textLength\t'+currentRange.toString().length);
console.log('text\t'+currentRange.toString())
I get startOffset:29 and endOffset: 4.
My Question:
Is it possible to keep track of which <p> tag I am inside of while using the Range() object? I will eventually have more html elements in this div tag, but want to be able to get the indices range of the selection as though it were all one string, ignoring all html elements inside.
Thanks for all the help!
I want to append some text after 2 closing divs to a sector element.
Click me
</div>
</div>
// this is where I want to append the text
My code appends the text after the link. How can I say "append it after the 2nd closing div"?
$('a.thingIClicked').click(function() {
$(this).append('hello');
});
The most direct way to do this is to find the second parent <div> element, and then insert the text after it.
$('a.thingIClicked').click(function() {
$(this).parent("div").parent("div").after("some text");
});
This will insert the text on the outside of the second <div> parent. Using append() will put the text on the inside of the parent, which from your example doesn't appear to be what you want.
There's probably a more elegant solution, but how about:
$('a.thingIClicked').click(function() {
$(this).parent().parent().after('hello');
});
Edit: #Zack is correct (and should probably get the answer credit for this one) - my original code would have added the text into the second enclosing div, rather than after it. I've edited my code above accordingly.
The easiest way would be to give the outer div an id and then use $("#outerdivid").
EDIT: Below will not work, but leaving it here for reference
However, you should also be able to use a jquery :parent filter:
http://api.jquery.com/filter/
$('a.thingIClicked').filter(':parent').filter(':parent').click(/**/);
Use .insertAfter()
http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');
Use .insertAfter() - http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');