create element around empty element - javascript

Im trying to get a solution to create a new element and append it around an empty element such like IMG, INPUT's
i could easly just add a parent element around the IMG or INPUT, but i would rather do in via the DOM only.
The only way ive been able to do this so far is using cloneNode and appending it to the newly created element.
Example add a DIV via DOM around the already present IMG
Before:
<input type="text" />
After:
<div><input type="text" /></div>
This is what i have created and works but because it deletes the node the defualt values get wiped i hope there is an simpler way to create and element and append around the INPUT
<input id="ic706" type="text" />
.
var e = document.getElementById("ic706")
var cloned = e.cloneNode(false);
e.parentNode.removeChild(e);
var c = document.createElement("div");
c.id = "container";
document.body.appendChild(c);
document.getElementById("container").appendChild(cloned);

I'd suggest:
function wrapElem(el, wrapWith) {
var newElem = document.createElement(wrapWith);
el.parentNode.insertBefore(newElem, el);
newElem.appendChild(el);
}
wrapElem(document.getElementsByTagName('input')[0], 'div');
JS Fiddle demo.
And seems to preserve event-binding.
This works by creating a new element, inserting it before the element you want to wrap, and then moving the element to wrap into the wrapper, rather than deleting and recreating; so this should preserve any events, and properties, bound to the element.

A rather primitive solution (but simple to follow):
var elem = document.getElementById('test');
elem.outerHTML = '<ul><li>' + elem.outerHTML + '</li></ul>';

Related

Insert node between two nodes based on attribute condition?

i was wondering if there's a jquery (or some other library) function that allows me to insert a node (div) between two other nodes (divs) based on its attribute.
For example:
Lets say i have this html code:
<div value=111/>
<div value=222/>
<div value=444/>
i want to insert <div value=333/> between the 222 and 444 accordingly.
Thanks to all helpers.
Yes you can do this.
obtain desired div using querySelector
use after method to add new element after the one obtained in the previous step
const div = document.createElement('div');
div.textContent = 'three';
const target = document.querySelector('div[value=two]');
target.after(div);
<div value="one">one</div>
<div value="two">two</div>
<div value="three">four</div>
To dynamically the find correct spot, you can use find method like this.
find the first element with value bigger than the one you provide
use before method to place the new element before the one from the previous step
const myValue = 333;
const div = document.createElement('div');
div.textContent = myValue;
const target = [...document.querySelectorAll('div')]
.find(v => Number(v.getAttribute('value')) > myValue );
target.before(div);
<div value="111">111</div>
<div value="222">222</div>
<div value="444">444</div>
use after();
here is working example in codepen
https://codepen.io/anon/pen/BVjbqZ
Both jQuery offers a variety of methods for this: insertBefore, insertAfter, before, and after.
The DOM provides insertBefore and insertAdjacentHTML.
For instance, using jQuery's before:
$("div[value=444]").before("<div value=333></div>");
Or using the DOM's insertBefore:
var div = document.createElement("div");
div.setAttribute("value", "333");
var target = document.querySelector("div[value=444]");
target.parentNode.insertBefore(div, target);
Or using the DOM's insertAdjacentHTML:
document.querySelector("div[value=444]").insertAdjacentHTML(
"beforebegin",
"<div value=333></div>"
);
Side note: div is not a void element, <div /> isn't a self-closing tag, it's a start tag with a / in it that's ignored.
Side note 2: value is not a valid attribute for div elements.

Append values to a specific element in a string with Jquery

I have an element in local storage with multiple elements, for simplicity, I will make the element:
<div id="outer">
<ul id="inner">
<li id="item">
</li>
</ul>
</div>
The element is saved as a string and I want to manipulate the contents.
Like such:
let local_storage_element = localStorage.getItem("val")
$(local_storage_element+':last-child').append("<p>something</p>")
No matter what selector I add after local_storage_element it will always append the value to the string not to the selected element(:last-child in this case)
does anyone know how to append to a specific element within the string??
Although you have written jquery in the title there is a javascript tag added also so I thought why not provide an answer that justifies your needs and helps you accomplish the task in the same way you want.
The
DocumentFragment interface represents a minimal document object that has no parent. It
is used as a lightweight version of Document that stores a segment of
a document structure comprised of nodes just like a standard document.
The key difference is that because the document fragment isn't part of
the active document tree structure, changes made to the fragment don't
affect the document, cause reflow, or incur any performance impact
that can occur when changes are made.
So how to do it as the DocumentFragment still appends node with it and not string, we will create a temp element and add the HTML from the localStorage using innerHtml and then append the firstChild of that temp node i.e our actual string which is now treated as a node, to the document fragment and then search and appends HTML to it, we will use our temp element to add HTML every time see below.
I will append a new child div to the element #outer in the string given above in the post here is the working FIDDLE as SO does not support localStorage you can see it working there open the console to view the resulting HTML with the new child added and below is the code
$(document).ready(function () {
if (localStorage.getItem('html') === null) {
localStorage.setItem('html', '<div id="outer"><ul id="inner"><li id="item"></i></ul></div>');
}
var frag = document.createDocumentFragment();
var temp = document.createElement('div');
temp.innerHTML = localStorage.getItem('html');
frag.appendChild(temp.firstChild);
temp.innerHTML = '<div class="new-child"></div>'
frag.querySelector("#outer").appendChild(temp.firstChild);
console.log(frag.querySelector("#outer"));
localStorage.removeItem('html');
});
You can't use string as selector. If you want transform string to html then you should put it in some element as innerHTML. So try create some hidden div and insert your string as HTML to it. Something like this
var your_string = '<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>';
document.querySelector('.hidden').innerHTML = your_string;
document.querySelector('ul li:last-child').innerHTML = 'your content';
document.querySelector('.result').appendChild(document.querySelector('ul'));
Example
The problem may arise when you get '<div id="outer">' from localStorage to use it as a selector since it only accepts "#outer" to be a selector. If you want to add an element to be the last child of parent's element, you could use after() instead of append().
$(document).ready(() => {
if ($("#charl").children().length === 0)
{
// if using after with no element inside ul then it will be inserted after il
$("#charl").html("<li>foo</li>")
}
else {
$("#charl li").after("<li>bar</li>")
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="charl">
<li>Foo</li>
</ul>

Jquery cloned element is replacing himself

I have been getting some issue with cloning element, when I am cloning an element and add it to the DOM it work perfectly but when I am trying to clone a second one its replacing the first added clone, do you know where it could come from ?
var clone_count = 1;
var add_row = $('.modeloRowBlock-hidden').clone(true) // clone my div that is hidden
$('.add-modelo-block').on('click', function() { // binded button to add my div
var current_row = add_row.removeClass('modeloRowBlock-hidden hidden').addClass('modeloRowBlock' + ' ' + clone_count++) ;
$('.modeloRowBlock-hidden').before(current_row);
});
Thanks a lot in advance for your help :).
Jonathan.
EDIT : My bad I made it work, actually cloned that way for another reason, and re integrated it in the .on and it worked.
You clone your row only once.
If you're using before on a single element, it will move the elements.
If an element selected this way is inserted into a single location
elsewhere in the DOM, it will be moved before the target (not cloned):
Read more: http://api.jquery.com/before/

Moving the content of a DIV to another DIV with jQuery

http://www.frostjedi.com/terra/scripts/demo/jquery02.html
According to this link elements can be moved around by doing $('#container1').append($('#container2')). Unfortunately, it doesn't seem to be working for me. Any ideas?
See jsfiddle http://jsfiddle.net/Tu7Nc/1/
You must append not your div exactly, but your div's content(inner HTML) with Jquery's html() function.
HTML:
<div id="1">aaa</div>
<div id="2">bbb</div>​
Jquery:
$("#1").append($("#2").html());
Result:
aaabbb
bbb
It is best not to use html().
I ran into some issues due to html interpreting the contents as a string instead of a DOM node.
Use contents instead and your other scripts should not break due to broken references.
I needed to nest the contents of a DIV into a child of itself, here is how I did it.
example:
<div id="xy">
<span>contents</span>
</div>
<script>
contents = $("#xy").contents(); //reference the contents of id xy
$("#xy").append('<div class="test-class" />'); //create div with class test-class inside id xy
$("#xy").find(">.test-class").append(contents); //find direct child of xy with class test-class and move contents to new div
</script>
[EDIT]
The previous example works but here is a cleaner and more efficient example:
<script>
var content = $("#xy").contents(); //find element
var wrapper = $('<div style="border: 1px solid #000;"/>'); //create wrapper element
content.after(wrapper); //insert wrapper after found element
wrapper.append(content); //move element into wrapper
</script>
To move contents of a div (id=container2) to another div (id=container1) with jquery.
$('#container2').contents().appendTo('#container1');
You can also do:
var el1 = document.getElementById('container1');
var el2 = document.getElementById('container2');
if (el1 && el2) el1.appendChild(el2);
or as one statement, but not nearly as robust:
document.getElementById('container1').appendChild(document.getElementById('container2'));
Edit
On reflection (several years later…) it seems the intention is to move the content of one div to another. So the following does that in plain JS:
var el1 = document.getElementById('container1');
var el2 = document.getElementById('container2');
if (el1 && el2) {
while (el2.firstChild) el1.appendChild(el2.firstChild);
}
// Remove el2 if required
el2.parentNode.removeChild(el2);
This has the benefit of retaining any dynamically added listeners on descendants of el2 that solutions using innerHTML will strip away.
$('#container1').append($('#container2').html())
Well, this one could be an alternative if you want to Append:
document.getElementById("div2").innerHTML=document.getElementById("div2").innerHTML+document.getElementById("div1").innerHTML
if you wanted to rewrite contents:
document.getElementById("div2").innerHTML=document.getElementById("div1").innerHTML
I suggest a general approach with a function and jQuery:
function MoveContent(destId, srcId) {
$('#' + destId).append($('#' + srcId).contents().detach());
}
Content of a detached source node is appended to a destination node with call:
MoveContent('dest','src');
The first parameter is an id of a new parent node (destination), the second is an id of an old parent node (source).
Please see an example at: http://jsfiddle.net/dukrjzne/3/

How to insert cloned element with in HTML Markup String?

I am in need of cloning a div and then append it it in another location. The DIV is looks like this.
<div id="clonableContet" class="clonableClass">
<input id="Name" class="clonableInput" type="text"/>
<input id="Age" class="clonableInput" type="text"/>
</div>
<div id="clonedContentHolder"></div>
If i clone clonableContent and append it in clonaedContentHolder, it contains the same ID
as the previous one. I want change the cloned Content div's id attribute dynamically. But i able to add new class name dynamically to the cloned input Elements. I am good with it. I will able to get the values with some class name reference.
But my problem is i want make last cloned content to be visible. Because, all of these div's are tab contents. I am not able to change the clonableContent div's id.
I tried to create a another div dynamically, and put the cloned div within that. Its like this,
var html = "<div id='clonedContent" + count + "'>" + clonedContent + "</div>";
But the output is [Object][Object]. cloned div, becames object within the String.
How shall i insert the clonedContent within a string as another string?
Or, is there any other way to get the same solution.
Thanks in advance.
create the html as such:
var html = $("<div />").attr('id', 'clonedContent'+count).html(clonedContent);
Then you can use html as a jquery object and append to as the last item as such:
html.appendTo('div:last');
The best way I've found to do this is to append the object to an existing jQuery object:
var html = $("<div id='clonedContent" + count + "' />").append(clonedContent);
Non JQuery solution:
var div = document.createElement("div"); //create a new div
div.id="clonedContent" + count; // set the id with your counter
div.appendChild(clonedContent); //add the DOM reference you have
document.getElementById("clonedContentHolder").appendChild( div ); //add the content to div on page

Categories