This is an interesting question I saw on the net but didn't know the answer:
The following code is intended to add five identical boxes containing links to the document, but it doesn’t work properly. Why not?
// Copies the contents of one box into another
function copyContents(from, to){
for( var i=0; i<=from.childNodes.length-1; i++){
to.appendChild(from.childNodes[i]); // <---- Error on this line.
}
}
//create a box to copy:
var referenceBox = document.createElement('div');
var link = document.createElement('a');
link.href = 'http://www.example.com/';
link.textContent = 'A link';
referenceBox.appendChild(link);
//Add box copies to the document
for(var i=0; i<5; i++){
var newBox = document.createElement('div');
copyContents(referenceBox, newBox);
document.body.appendChild(newBox);
}
Options:
to.appendChild() expects HTML, but from.childNodes[i] is a node object, so all the boxes will contain the texts[Object Node].
document.createElement() reuses existing elements with the same tag, so only one box is added to the document.
The same link element can’t have multiple parents,so only one box ends up with a link in it.
A link’s href has to be set using setAttribute(); setting the property link.href won’t do anything,so none of the links in the boxes will point anywhere.
I guess the answer is 3, but not sure and don't know why?
Any explanation? Tnx
link: to the question
You should only iterate from i = 0 to childNodes.length - 1 in copyContent. Also, you should clone DOM nodes if you want to append them to multiple locations in your document (= 3rd option):
// Copies the contents of one box into another:
function copyContents(from, to) {
for (var i = 0; i < from.childNodes.length; i++) { // <-- change <= to <
to.appendChild(from.childNodes[i].cloneNode(true)); // <-- add cloneNode(true); to clone node and all its children
}
}
// Create a box to copy:
var referenceBox = document.createElement('div');
var link = document.createElement('a');
link.href = 'http://www.example.com/';
link.textContent = 'A link';
referenceBox.appendChild(link);
// Add box copies to the document:
for (var i = 0; i < 5; i++) {
var newBox = document.createElement('div');
copyContents(referenceBox, newBox);
document.body.appendChild(newBox);
}
See also appendChild only works first time
Related
I'm trying to change the lay-out for WooCommerce, but since I can't get that working I decided to change it to my wishes by using Javascript to create a div and append it to the existing div. I do have some lines that go through every div with a certain class, but that only works when I let them change the innerHTML. But when I use appendChild, it only appends to the last div. Anyone have an idea what could be it? This is the code I use. The class "product-type-simple" is the div that already exists.
var product_item_wrapper = document.createElement("div");
product_item_wrapper.style.width = "100px";
product_item_wrapper.style.height = "100px";
product_item_wrapper.style.background = "red";
product_item_wrapper.style.color = "white";
product_item_wrapper.innerHTML = "Hello";
product_item_wrapper.className = "product";
var divjes = document.getElementsByClassName("product-type-simple");
for(var i = 0; i < divjes.length; i++){
divjes[i].appendChild(product_item_wrapper);
}
You are creating one element. Then you append it as a child of multiple elements. Each time you do, you remove it from where it was before and place it in the new element.
If you want multiple elements, then you need to create multiple elements.
Move the first 7 lines of your code so they are inside the loop.
One element can only be appended to a single div. Consider making a function which returns a new element to be appended:
function createWrapper()
{
var product_item_wrapper = document.createElement("div");
product_item_wrapper.style.width = "100px";
product_item_wrapper.style.height = "100px";
product_item_wrapper.style.background = "red";
product_item_wrapper.style.color = "white";
product_item_wrapper.innerHTML = "Hello";
product_item_wrapper.className = "product";
return product_item_wrapper;
}
var divjes = {};
divjes = document.getElementsByClassName("product-type-simple");
for (var i = 0; i < divjes.length; i++)
{
divjes[i].appendChild(createWrapper());
}
I'm trying to write a javascript what is searching for all of the links on the page, then it is adding them to the bottom, under the original content.
"Document.links" seems to do the finding part, it is also listing them, but they are not clickable. So I tried to add some html codes (startHref and endHref lines), which broke the whole thing of course.
My (non-working) script:
var links = document.links;
for(var i = 0; i < links.length; i++) {
var preLink = document.createTextNode("LINK: ");
var linkHref = document.createTextNode(links[i].href);
var lineBreak = document.createElement("br");
var startHref = document.createElement("a href="");
var endHref = document.createElement(""");
document.body.appendChild(preLink);
document.body.appendChild(startHref);
document.body.appendChild(linkHref);
document.body.appendChild(endHref);
document.body.appendChild(lineBreak);
}
If this will work I'd also like to have them listed with a number in front of each line (starting with 1 - could be set in the preLink part) - if not too hard to implement.
Also, is there a way to list not all of the links, but only those matching with something? Like only links with a specific domain. Thank you!
As you have already found out, you can get all links in a document with:
var links = document.links;
Now you have an HTMLCollection. You can iterate through it and display all links. For better layout you can put them in a paragraph (p). This would be the loop:
for (var i = 0; i < links.length; i++) {
var p = document.createElement("p");
p.appendChild(links[i]);
document.body.appendChild(p);
}
Now all links are appended at the end of the page, every link is on its own line and they are clickable. Please try this out.
EDIT: as of your comment, if I understand it right, you have just to put one additional line:
for (var i = 0; i < links.length; i++) {
var p = document.createElement("p");
// the following line is added
links[i].innerHTML = links[i].href;
p.appendChild(links[i]);
document.body.appendChild(p);
}
That line will simply replace the inner HTML of the link with its value for the attribute href.
EDIT:
The variable links just points to document.links. The existing links are therefore removed from their original position and appended to the end. If you try to create new links in the for loop, like document.createElement("a") you will create an endless loop, because you're iterating through all links in the document. You remember, the variable links is not a snapshot of document.links when created, but points to it.
You can work around this with creating an array:
var links = [];
// populate the array links
for (var j = 0; j < document.links.length; j++) {
links.push(document.links[j].cloneNode());
}
Now this is a snapshot of all links on the page. Every links is cloned and pushed to the array. Now run the for loop and the original links aren't removed.
If the original link was something like:
This is an example.
it will become:
http://example.com
But if you want just:
http://example.com
then you have to adapt the code:
for (var i = 0; i < links.length; i++) {
var p = document.createElement("p");
var a = document.createElement("a");
a.href = links[i].href;
a.text = links[i].href; // you can use text instead of innerHTML
p.appendChild(a);
document.body.appendChild(p);
}
If you want to style the output you can add classes like this:
p.classList.add("my-css-class");
I hope this helps you to achieve your goal.
I want to make some refinement to some code from a previous question:
// the new base url
var base = ' https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var links = document.getElementsByTagName('a');
for(var i = 0;i < links.length;i++){
// check each link for the 'asin' value
var result = /asin=([\d\w]+)/.exec(links[i].getAttribute('href'));
if(result){
// make a new url using the 'base' and the 'asin' value
links[i].setAttribute('href', base+result[1]);
}
}
Now, instead of it acting on all links, can I get it to only look at links that are from images?
Here is an HTML snippet to show what I mean:
<img width="125" height="125" border="0" src="http://ecx.images-amazon.com/images/I/01W9a7gwosL.jpg" alt="43453">
That's an image link - I do want it to act on that.
Impossible?
My gut instinct is that this isn't actually possible in code - because document.getElementsByTagName('a') can't see the difference between a text link and an image link.
Use querySelectorAll to pre-select only the right kinds of nodes. EG:
// the new base url
var base = 'https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var linkImgs = document.querySelectorAll ("a > img");
for (var J = linkImgs.length - 1; J >= 0; --J) {
var imgLink = linkImgs[J].parentNode;
//--- Check each link for the 'asin' value
var result = /asin=([\d\w]+)/.exec (imgLink.getAttribute ('href') );
if( result) {
// make a new url using the 'base' and the 'asin' value
imgLink.setAttribute ('href', base+result[1]);
}
}
You could use regex to check for the link inside the HTML of the link:
for(var i = 0;i < links.length;i++) {
// check each link for the 'asin' value
var result = /asin=([\d\w]+)/.exec(links[i].getAttribute('href'));
// check each link for an img tag
var hasimage = /<img [^>]+>/.test(links[i].innerHTML);
if(result && hasimage){
// make a new url using the 'base' and the 'asin' value
links[i].setAttribute('href', base+result[1]);
}
}
Also, using regular expressions to search for HTML probably isn't the best bet, but if you control what's being generated, then this is probably the quickest way without a 3rd party html parser.
You can filter the links based on whether or not they contain an image.
var links = document.getElementsByTagName('a');
links = [].filter.call(links, function(item) {
// test to see if child node is an image
return item.childNodes[0].nodeName === 'IMG';
});
for(var i = 0;i < links.length;i++){
// do what you gotta do
}
You can just test for an IMG child and only process the link if there is one there.
Example on JSFiddle
// the new base url
var base = ' https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var links = document.getElementsByTagName('a');
for(var i = 0;i < links.length;i++){
var linkElement = links[i];
//get the first child of the a element
var firstChild = linkElement.children[0];
//if there is a child and it's an IMG then process this link
if (typeof(firstChild) !== "undefined" && firstChild.tagName=="IMG") {
// check each link for the 'asin' value
var result = /asin=([\d\w]+)/.exec(links[i].getAttribute('href'));
if(result){
// make a new url using the 'base' and the 'asin' value
links[i].setAttribute('href', base+result[1]);
}}
}
// the new base url
var base = ' https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var links = document.getElementsByTagName('img');
var hrefs = links.parent;
for(var i = 0;i < hrefs.length;i++){
// check each link for the 'asin' value
var result = /asin=([\d\w]+)/.exec(hrefs[i].getAttribute('href'));
if(result){
// make a new url using the 'base' and the 'asin' value
hrefs[i].setAttribute('href', base+result[1]);
}
}
There is a links collection, and you can can just check if the link has an image child node:
var link, links = document.links;
var re = /asin=([\d\w]+)/;
for (var i=0, iLen=links.length; i<iLen; i++) {
link = links[i]
if (link.getElementsByTagName('img').length && re.test(link.href)) {
link.href = base + result[1];
}
}
My initial response would be to look into query Select All and then assign a class name to grab on all of the a tags that would be affected by whatever your trying to do. When I get to my laptop I'll edit this with an example.
I want to make a word bold in given paragraph. Here is a javascript code.
var hlWord = "idm";
var nregex = new RegExp(hlWord,"gi");
var div = document.getElementById("SR").innerHTML;
var rword = div.replace(nregex,"<b>"+hlWord+"</b>");
document.getElementById("SR").innerHTML = rword;
Here is a HTML code.
<div id="SR">
Download here free idm.
click here to download
</div>
This is work well and make all idm bold but here is a problem that it also change
url to like this
click here to download
This is not a valid url.This is the problem that this code make the url damaged.
Please tell me how can I avoid this.
Thanks...
You can iterate through all the text nodes with the methods in this thread, change them and replace them with new bold ones.
var hlWord = "idm";
var nregex = new RegExp(hlWord,"gi");
var sr = document.getElementById('SR');
function escape_html(html) {
return html.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
(function findTextNodes(current) {
// make a shadow copy of the child nodes.
var current_children = Array.prototype.slice.call(current.childNodes);
for(var i = 0; i < current_children.length; i++) {
var child = current.childNodes[i];
// text node
if(child.nodeType == 3) {
var value = escape_html(child.nodeValue);
var html = value.replace(nregex, '<b>' + hlWord + '</b>');
if (html != value) {
var node = document.createElement('div');
node.innerHTML = html;
// make a shadow copy of the child nodes.
var childNodes = Array.prototype.slice.call(node.childNodes);
// replace the plain text node with the bold segments
for (var j = 0; j < childNodes.length; j++) {
var c = childNodes[j];
current.insertBefore(c, child);
}
current.removeChild(child);
}
}
else {
findTextNodes(child);
}
}
})(sr);
Check the code example at jsFiddle.
UPDATE:
Passerby pointed out that innerHTML should be used carefully. Escape text nodeValue before processing.
After some try-and-fail, I made a working demo that may be more complicated than you might have think:
http://jsfiddle.net/4VKNk/
var cache=[];
var reg=/idm/gi;
var id=function(ID){return document.getElementById(ID);}
function walkElement(ele){
if(ele.childNodes.length>0){
for(var i=0;i<ele.childNodes.length;i++){
walkElement(ele.childNodes[i]);
}
}else if(ele.nodeType==3){//text node
if(reg.test(ele.nodeValue)){
cache.push(ele);
}
}
}
id("test").onclick=function(){
cache=[];
walkElement(id("SR"));
while(cache.length>0){
var ele=cache.shift();
var val=ele.nodeValue;
var pnt=ele.parentNode;
var nextSibling=ele.nextSibling;
var i=0;
var r,tmp;
pnt.removeChild(ele);
while(r=reg.exec(val)){
tmp=document.createTextNode(val.substring(i,r.index));
if(nextSibling){
pnt.insertBefore(tmp,nextSibling);
tmp=document.createElement("strong");
tmp.appendChild(document.createTextNode("idm"));
pnt.insertBefore(tmp,nextSibling);
}else{
pnt.appendChild(tmp);
tmp=document.createElement("strong");
tmp.appendChild(document.createTextNode("idm"));
pnt.appendChild(tmp);
}
i=reg.lastIndex;
}
if(i<val.length-1){
tmp=document.createTextNode(val.substring(i,val.length));
if(nextSibling){
pnt.insertBefore(tmp,nextSibling);
}else{
pnt.appendChild(tmp);
}
}
}
};
I took the approach of DOM manipulation.
Explanation:
Walk through the whole DOM tree under target element, and cache all TEXT_NODE (nodeType==3);
Use RegExp.exec() method to get the index of each match;
While you find a match, add back the text that come before it, and then add a highlight element (<strong>) that contains the match; continue this step;
If we still have text left, add it back.
The reason I need to cache the TEXT_NODEs first, is that if we directly modify it in walkElement, it will change childNodes.length of its parent, and break the process.
okay i have come across a simple javascript code that will search all the hyperlinks in a page which works briliantly fast. the only problem is that the browser freezes when it tries to remake these links in a div, no error just as soon as i push the button the browser refuses to load. as you can see it gets the input from a form then searches every hyperlink for these terms then is supposed to populate a div with links but it doesn't. the code is as follows.
function search0(){
var lists = document.getElementsByTagName("a");
for (var i = 0; i < lists.length; i++) {
var output = lists[i];
var team1 = document.getElementById("search1").value;
var matchPos1 = output.innerHTML.search(team1);
if(matchPos1 != -1){
var team2 = document.getElementById("search2").value;
var matchPos2 = output.innerHTML.search(team2);
if(matchPos2 != -1){
var elem1 = document.createElement("a")
var styleattr=document.createAttribute("href");
styleattr.nodeValue=output;
elem1.setAttributeNode(styleattr);
var text1 = document.createTextNode(output.innerhtml);
elem1.appendChild(text1);
var parentdiv = document.getElementById("frame2");
parentdiv.appendChild(elem1);
}
}
}
}
You are creating an infinite loop.
The nodeList you create with document.getElementsByTagName("a") is live i.e. if you add a link to the page it will appear in this list automatically! Yes, that's right, even without requerying. Here's a reference doc.
You are adding links to the nodeList which are then matched and added to the end on the nodeList which are then matched and so on and so on
To do what you want to do you should create an initial array of links like this.
//creates a real js array from a nodelist
var list = Array.prototype.slice.call( document.getElementsByTagName("a"), 0 );
Here is an explanation of Array.prototype.slice.call
Also change case-sensitive mistake:
var text1 = document.createTextNode(output.innerhtml);
To
var text1 = document.createTextNode(output.innerHTML);