documentFragement - javascript

please take a look at the following code.
var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id="myId";
oFra.appendChild(myDiv);
oFra.getElementById("myId");
In this case do i have ref to the div i just inserted inside documentFragement using the variable myDiv?
Lets say i move ahead and add this documentFragement to the actual DOM. Will I still be able to access the div with id="myId" using this "myDiv" variable???

If you try this, it works:
http://www.jsfiddle.net/dactivo/4BSaF/
The problem is that you cannot use "oFra" + getElementById directly, once you append the fragment, you can access the div "myId" in the DOM.
<div id="test"></div>
<script type="text/javascript">
var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id="myId";
myDiv.innerHTML="hola";
oFra.appendChild(myDiv);
// oFra.getElementById("myId");
document.getElementById("test").appendChild(oFra);
alert(document.getElementById("myId").innerHTML);
</script>

Related

how to show html when using appendChild

I'm creating some elements through this code in JavaScript:
var tdiv = document.createElement("div");
tdiv.setAttribute('id', 'titlediv');
var ddiv = document.createElement("div");
ddiv.setAttribute('id', 'datediv');
var cdiv = document.createElement("div");
cdiv.setAttribute('id', 'contentdiv');
Now I have to append some html text to cdiv. I tried to do cdiv.appendChild() but it displays an error since it is not a node. Tried doing var newsupdate_ = document.createTextNode(global[j].content) then appending it but it looks like this:
Can I do setAttribute to place the content inside the desired div?
appendChild() would not work in cdiv because there is no such method present in the element created by createElement().
createTextNode() creates a new Text node. It will not evaluate any HTML present in the parameter string.
Try innerHTML like the following way:
var cdiv = document.createElement("div");
cdiv.setAttribute('id', 'contentdiv');
cdiv.innerHTML = '<h1>Header 1</h1>';
document.getElementById('container').append(cdiv);
<div id="container"></div>
use innerHTML, example
document.getElementById("demo").innerHTML = "Paragraph changed!";

Javascript,To add text to element which has a exsisting text-node

I want to add a text next to "Groceries" in the <h1> tag using either nodeValue property or textContentPropery. I have added two methods that are not working for me.Give me a reason why is it not happening not just the answer.
I don't want to use appendChild property in this.
<body>
<h1 id="head">Groceries</h1
><div id="li-container"
><ul
><li>item2</li
><li>item3</li
><li>item4</li
><li>item5</li
></ul
></div>
<script language="javascript" type="text/javascript">
var list = document.getElementsByTagName("li");
var head = document.getElementById("head").firstChild.nodeValue;
head.nodeValue = head + list.length;
//OR OR OR OR
//
var head = document.getElementById("head").firstChild.textContent;
head.textContent = head + list.length;
</script>
</body>
var head = document.getElementById("head").firstChild.nodeValue;
Here head contains only the text Groceries. So you can't access groceries.nodevalue
So you must use:
var head = document.getElementById("head").firstChild;
head.textContent = head.nodeValue + list.length;
Here, we're storing the reference of the textNode in head at first.
In second line, we are setting the textContent in that textNode.
In your case head is a string value as you are assigning the nodeValue of the header element to it, but any changes does to the variable value will not get reflected in the header as the string is not a mutable object.
You need to refer to the text node element and set its node value
var list = document.getElementsByTagName("li");
var head = document.getElementById("head").firstChild;
console.log(head)
head.nodeValue = head.nodeValue + list.length;
Demo: Fiddle

How to wrap innerHTML div with Class?

I want to be able to copy the text from element id 'myModal' to 'purchaseNotice' and wrap 'purchaseNotice' with new class.
var MyDiv1 = document.getElementById('myModal');
var MyDiv2 = document.getElementById('purchaseNotice').wrapInner( "<div class='new'></div>");
MyDiv2.innerHTML = MyDiv1.innerHTML;
The code above works until I add .wrapInner( "<div class='new'></div>") - how shall I wrap this?
If you're using jQuery you can do it like this : DEMO
$(document).ready(function(){
$('#purchaseNotice').html($('#myModal').html()).wrapInner("<div class='new'></div>");
});
Update
Sorry, noticed you wanted to wrap the purchaseNotice in the new div. You would then use wrap() see here : http://jsfiddle.net/32tAx/1/
$(document).ready(function(){
$('#purchaseNotice').html($('#myModal').html()).wrap("<div class='new'></div>");
});
var MyDiv1 = document.getElementById('myModal');
var MyDiv2 = document.getElementById('purchaseNotice')
if ($("#myModal").length) {
$("#purchaseNotice").addClass("your-class").show();
MyDiv2.innerHTML = MyDiv1.innerHTML;
} else {
$("#purchaseNotice").hide();
}
This code works great! It copies a innerHTML of the id element 'myModal' to 'purchaseNotice', then it checks if 'myModal' exists within the DOM, if so it adds a new class, if not then hides it totally.
This works great when you have a textbox in which you don' want to show this information, i.e. product/service description can contain disclaimer and you want to make it appear at the top of the screen rather then in the description itself.

How to replace Dom element with JS and include an id and a JS function?

This is a follow up to this question:
How to replace DOM element in place using Javascript?
I wasn't the OP but I am facing a similar situation. The initial question was "how to replace an anchor element with a span using Javascript. The answer that was given (thank you Bjorn Tipling ) was to use replaceChild(), with the following example:
<html>
<head>
</head>
<body>
<div>
<a id="myAnchor" href="http://www.stackoverflow">StackOverflow</a>
</div>
<script type="text/JavaScript">
var myAnchor = document.getElementById("myAnchor");
var mySpan = document.createElement("span");
mySpan.innerHTML = "replaced anchor!";
myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>
</body>
</html>
My follow up is: how to add / insert an id (e.g., "xyz")and a function (e.g., onmouseout='doWhatever(this)') to the replaced DOM element?
You can add an id property by simply setting it:
mySpan.id = "xyz";
And you can attach an event like so:
mySpan.onmouseout = function() {
doWhatever(this);
}
I would avoid setting event attributes when dynamically creating DOM elements. Assigning the event handlers programmatically is the right way to go.
mySpan.id = "abcd123";
mySpan.onclick = function () { console.log(this.id + " was clicked"); };
Once you have your HTML element cached to a variable, you can just keep using that variable to work with it.
Use this:
<script type="text/JavaScript">
var myAnchor = document.getElementById("myAnchor");
var mySpan = document.createElement("span");
mySpan.appendChild(document.createTextNode("replaced anchor!"));
mySpan.id = "xyz";
mySpan.onmouseout = function() {
doWhatever(this);
};
myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>

Get HTML fragment without text by jQuery

I have a HTML code with div container and another HTML element and text inside it
<div id="container"><i class="myico"></i> text</div>
I need to get only HTML element from the container without the text.
So i need to get only
<i class="myico"></i>
How can I get it using jQuery?
Simply to get the element use one of the following:
var element = $("#container > i");
var element = $("#container i");
var element = $("#container .myico");
var element = $("#container").find("i.myico");
To get the element out of the markup use detach():
var element = $("#container > i").detach();
Then to get an HTML code, you may use outerHTML property:
var html = element.get(0).outerHTML;
DEMO: http://jsfiddle.net/tLvdZ/
$('i') / $('.myico') / $('div i')... http://api.jquery.com/category/selectors/
var htmltag = $("#container").html();
htmltag = htmltag.replace($("#container").text(),"");
For reference you can use :- refer this

Categories