Insert plain text between two divs - javascript

I have some HTML, like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
Is there a way using jQuery to insert the plain text Bar directly in between #foo2 and #foo3, so the resultant HTML would be like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
Bar
<div id="foo3">foo3</div>
</div>
I am able to put the text in with a <span> tag using $("<span/>").text("Bar").insertAfter("#foo2"), but is there a way to just put the plain text there, without a <span> around it?

You can use .after:
$('#foo2').after('bar');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>

Use document.createTextNode("bar"):
$("#foo2").after(document.createTextNode("bar"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>

In the case you need an alternative with plain JavaScript, you can use insertAdjacentText()
document.getElementById('foo2').insertAdjacentText('afterend', 'bar');
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
In case you are interested, the first argument provides other alternatives:
element.insertAdjacentText(position, element);
position
A DOMString representing the position relative to the element; must be one of the following strings:
'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.
element
A DOMString representing the text to be inserted into the tree.

Related

How to get only child elements outside a certain class jquery

This is the scenario. The black element has an ID and theoretically I want to select like this:
$("#someid .class2")...
I don't want to get the element inside the red element though. And yes, the classes are written correctly, the red element and black have the same class...
Also, there may be elements between any of these elements (like in nested - the green element inside the red one might be nested inside multiple other elements, so the red one is not necessarily the parent)
So basically ignore all class1 elements other than itself.
How can I get this?
Edit: I added 2 examples. The query, whatever it is, should work for both.
Example 1
<div id="someid" class="class1">
<div class="class1">
<div>
<span class="class2"></span> <---- NO
</div>
</div>
<div>
<span class="class2"></span> <-----YES
</div>
</div>
Example 2
<div id="someid" class="class1">
<div>
<div>
<div class="class1">
<div>
<span class="class2"></span> <---NO
</div>
</div>
<span class="class2"></span> <-------YES
</div>
</div>
<div class="class1">
<span class="class2"></span> <--------NO
</div>
<span class="class2"></span> <-----------YES
</div>
console.log(document.querySelectorAll("#test1 > .class2"))
<div id="test1" class="class1">
<div class="class1">
<div class="class2">test 3</div>
</div>
<div class="class2">test 1</div>
</div>
In this example im using vanilla javascript but with jQuery the css selector it would be the same.

Use getContent from multiple TinyMCE4 instances in one go?

I need to get the HTML from a sourrounding DIV, and at the same time get the correct (raw?) HTML from the multiple DIVs with the inline tinyMCE4.
I have managed to get all the HTML by using :
jQuery("#ForSaving").html(jQuery(".Editable").html());
But this gets the wrong HTML from the tinyMCE. In stead of a output of for instance <iframe>, I get a <img class="mce-object mce-object-iframe" etc.
I have tried to use tinyMCE's getContent(), but have not succeeded to get the correct from all tinyMCE instances in one go.
It is important to me that I don't only get the content from inside the tinyMCE DIVs, but also the surrounding DIVs and code. I need that to further process the HTML.
Here is an example of my pure HTML:
<html>
<head>
<script type="text/javascript">
tinymce.init({
selector: "div.tinyeditor",
inline: true,
theme: "modern",
</script>
</head>
<body>
<div id="ForSaving"></div>
<div id="Editable">
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
</div>
</div> <!-- end of div#editable -->
</body>
</html>
I need to get ALL the HTML content from within the DIV #Editable, but with the (raw?) correct HTML output from the tinyMCE instances. Hopefully at once.
I need to get a HTML looking like this:
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
</div>
<div class="contentwrap" id="area_(randnumb)">
<div class="somediv">Some html</div>
<div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
</div>
</div>
Is there a simple way to do this?
I solved this by doing some changes:
1) I used jquery each() to run a loop through each div.contentwrap
2) I first got the contentwrap's true ID
3) Then built the usin var contentwrapstart = (and using HTML + the ID here)
<div class="contentwrap" id="area_(randnumb)">
4) Then got the tinyMCE content for that specific tinyeditor. (Had to add a ID to that div too)
5) Then built < to end the wrapping
6) Added each to a var result += (values here)
7) Did this for each
8) Stored var result = outside the loop
9) Got the HTML I needed from var result later.
And this worked well :-)

Issue on Loading a Div entire content to New Div

Can you please take a look at this demo and let me know why I am not able to load the #source div into #target div?
<div id="source">
<div class="source-inn"><a>A</a></div>
<div class="source-inn"><p>B</p></div>
<div class="source-inn"><span>C</span></div>
</div>
<div id="target"></div>
<script>
$( "#source" ).load( "#target" );
</script>
There is no need to use .load() here because that is to load data from the server and place the returned HTML into the matched element (doc for .load is here).
I Suggest to use .append() for .children() elements like that :
http://jsfiddle.net/csdtesting/rc9kgekc/
$('#target').append($('#source').children());
The DOM result after that will be:
<div id="source">
<div id="target">
<div class="source-inn"><a>A</a></div>
<div class="source-inn"><p>B</p></div>
<div class="source-inn"><span>C</span></div>
</div>
</div>
BUT, if you want DOM result to be like that:
<div id="target">
<div id="source">
<div class="source-inn"><a>A</a></div>
<div class="source-inn"><p>B</p></div>
<div class="source-inn"><span>C</span></div>
</div>
</div>
Then, you will use it without .children() as bellow:
http://jsfiddle.net/csdtesting/aywww7r7/
$('#target').append($('#source'));
Hope this helps!
You want to append the div to the source like this:
$( "#source" ).append( $("#target") );
note that the css won't apply to the target since the target div doesnt have the same class.

JQuery .html() usage

Say I have
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
</div>
$('#controller').html().which returns
<div id="first">1</div>
<div id="second">2</div>
How do I get .html() to return
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
</div>
Or is there an alternate function for that?
Wrap it (ie. a clone) inside another parent
$('<div></div>').append($('#controller').clone()).html();
Also, check out a similar question.
You need to use outerHTML
Live Demo
$('#controller')[0].outerHTML
You can add your div's clone to dynamically created div and use html of it.
$('<div>').append($('#controller').clone()).html();

Fastest way to access a node

I have about thousand DIV tags structured this way:
<div id="1">
<div class="1"></div>
<div class="2"></div>
...
</div>
<div id="2">
<div class="1"></div>
<div class="2"></div>
...
</div>
If I want to now access a particular node, say 'div#10 div.5' - what is the fastest way to do it using javascript DOM traversal? I already have the index values "10" and "5" - I am just looking for the fastest way to achieve this.
Thanks a lot.
If you've got about 1000 DIVs I assume this is auto generated html?
If so, is there any reason why you can't add an id to the inner DIVs too?
<div id="1">
<div id="1.1" class="1"></div>
<div id="1.2" class="2"></div>
...
</div>
<div id="2">
<div id="2.1" class="1"></div>
<div id="2.2" class="2"></div>
...
</div>
Then you can just use getElementById and not have to worry about ordering or spacing etc.
Since element ids have to be unique on the page then this should always be the fastest way to look up the element.
Without validation and assuming the child nodes are the only nodes and all in sequence;
document.getElementById('10').childNodes[4];
Watch out for whitespace that becomes a node https://developer.mozilla.org/En/Whitespace_in_the_DOM
using jquery:
alert($("#10 > .5").html());

Categories