I want to create a new element and then set the value of the new element. Then add the element to div.
var x = document.getElementById("Header");
var element =document.createElement("test");
var addel=x.appendChild(element)
<div id="Header">
<h1>
<img height="150" src="http://test.com/im.jpeg">
<span>test</span>
</h1>
</div>
for instance, create a new element called "test" then add the element to div and set the value of test="1".
Your new element won't be recognised by the browser as html has fixed set of elements
You perhaps need to use a text based element like span,p or you can simply set innerText of a block element like div to "1"
If you want to create your own elements You can refer here
https://developers.google.com/web/fundamentals/web-components/customelements
You can also extend existing elements to form new elements
You can use Node.textContent or HTMLElement.innerText property to set the text:
var x = document.getElementById("Header");
var element =document.createElement("test");
element.textContent = "1";
var addel=x.appendChild(element);
<div id="Header">
<h1>
<img height="150" src="http://test.com/im.jpeg">
<span>test</span>
</h1>
</div>
change the code with
var x = document.getElementById("Header");
var element =document.createElement("test");
element.setAttribute('value','1');
var addel=x.appendChild(element);
Related
I am using MediumEditor which a WYSIWYG editor using contenteditables. I need to assign different IDs to each element inside of the contentEditable, but (when you press Enter) the editor will clone a paragraph from an esiting one with all it's attributes. I am wondering if there is a way to identify the new <p> element from the one it was cloned from? The new element can be placed either before or after the existing one.
UPDATE:
Here's an example:
https://jsfiddle.net/wwoh7e62/
<div id="container">
<p id="myid" class="myclass" data-id="myid">some text</p>
</div>
<button onclick="doClone(); myFunc();">clone</button>
<script>
doClone = function() {
var container = document.getElementById('container');
var node = container.getElementsByTagName('p')[0].cloneNode(false);
node.innerHTML = 'cloned node';
container.appendChild(node);
}
myFunc = function () {
console.log('my func');
}
</script>
The code in doClone I don't have access to. My code should reside in the myFunc function.
While I was typing the fiddle I realized that the solution will probably be in attaching an event listener (which is not cloned) and the new node will be the one that does not have the event listener.
UPDATE:
ids that were assigned previously need to stay the same as thay are used to identify particular nodes.
You can try this :
Remove the id from "p"
<div id="container">
<p class="myclass" data-id="myid">some text</p>
</div>
<button onclick="doClone(); myFunc();">clone</button>
Then update them into your Func function :
var length = document.getElementById("container").getElementsByTagName("p").length;
for(var i=0; i < length; i++) {
document.getElementById("container").getElementsByTagName("p")[i].id = i;
}
Does this help ?
So I have two divs
<div id="1"><p>Hello<p></div>
<div id="2"><p>Goodbye<p></div>
And I am wondering if there is a simple technique to set div "1" equal to div "2" ?
So, the end result will be:
<div id="1"><p>Goodbye<p></div>
<div id="2"><p>Goodbye<p></div>
Thanks.
Do exactly that..
var div1 = document.getElementById("1");
document.getElementById("2").innerHTML = div1.innerHTML;
Try it using javascript
document.getElementById("1").innerHTML = document.getElementById("2").innerHTML
to get specific tags within an element use:
var x = document.getElementById("1");
var y = x.getElementsByTagName("p");
or in one line:
document.getElementById("1").getElementsByTagName("p").innerHTML;
So I have the following HTML...
HTML:
<div id="col1">
<img src="1.jpg">
</div>
And I am implementing a HTML5 drag and drop feature where the inner html of col1 is changed for the dragged element's inner html - so basically the columns change their content.
I have another div (let's call that swap-text) where I want to change its text content depending on what image is presently inside col1.
This is why I want to figure out how I can obtain col1's img element's src attribute value through JavaScript so I can then write an if statement to change the content of the swap-text depending on which image is in col1.
I could add ID's to the img elements but then I still don't know how I would write the condition to check if say, img-id1 parent is col1.
Attempt(s):
var doc = document.getElementById("col1");
var children = null;
var imgEle;
//gets img node, but also got 1/2 text object(s)?
for (var i = 0; i < doc.childNodes.length; i++) {
children = doc.childNodes[i];
console.log(children);
}
//document.getElementById("img")
//children[1].getAttribute('src'); - cannot call method 'getAttribute' of undefined
//imgEle = doc.childNodes[0].getElementById('img'); - Object #<Text> has no method 'getElementById'
console.log(imgEle);
console.log(children);
This work fine pure javascript:
document.getElementById("col1").getElementsByTagName("img")[0].getAttribute("src");
var doc = document.getElementById("col1");
var img = document.getElementsByTagName('img')[0];
var imgParent = img.parentElement;
This is how you determine the elements parent/
I suggest you to use JQuery so you can simply use:
$("img").attr("id"); //Return the id of the img element
Check this:
var column = document.getElementById("col1");
var imgSrc = column.getElementsByTagName("img")[0].getAttribute("src");
Or just use the jQuery - it's simpler:
$('#col1 img').attr('src');
as you will only have one child node in col1 (the img), change the for loop.
var doc = document.getElementById("col1");
var children = null;
var imgEle;
//gets img node, but also got 1/2 text object(s)?
//for (var i = 0; i < doc.childNodes.length; i++) {
// children = doc.childNodes[i];
// console.log(children);
//}
childen = doc.childNodes[0];
// or children = doc.firstChild;
console.log(children);
//document.getElementById("img")
console.log(children.getAttribute('src')); - children is single object
//imgEle = doc.childNodes[0].getElementById('img'); - Object #<Text> has no method 'getElementById'
console.log(imgEle);
console.log(children);
Following my code:
HTML:
<div id="element">
<div></div>
<div id="c_a"></div>
<div></div>
<div id="c_b"></div>
</div>
Javascript:
var element = document.getElementById("element");
var clone_element = element.cloneNode(true);
How to change the name of all the id (including the "element") of the variable clone_element?
You can get the child divs of div#element using clone_element.getElementsByTagName('div'); and loop through them, changing the id property of each as needed.
Here is a reference to some DOM object properties.
You can set the id of the cloned element directly.
clone_element.id = "new_element_id";
The children can be accessed using the children property:
clone_element.children[1].id = "clone_a";
clone_element.children[3].id = "clone_b";
How can you change the hyrarchy / structure of html when it's rendered with javascript?
I would like to remove a parent div and copy it's attribute and classname
to it's child element. But I want to do this in the whole page that contains a certain class name.
In code example: I need this code
<div class="abc" myid="123" position="2">
<div class="someblock">
<p>Some paragraph</p>
<img width="140px; height: 140px; class="myimg" src="url to imgage">
</div>
changed to :
<div class="someblock" class="abc" myid="123" position="2">
<p>Some paragraph</p>
<img width="140px; height: 140px; class="myimg" src="url to imgage" />
</div>
Does anyone know how this can be done with JavaScript, or jQuery?
Thanks in advance!,
Chris.
You can try:
<script>
$('.abc').each(function(){
$(this).children().addClass($(this).attr('class'));
$(this).children().attr('myid', $(this).attr('myid'));
$(this).children().attr('position', $(this).attr('position'));
$('body').append($(this).html());
$(this).remove();
});
</script>
Be careful.
$('.someblock').each(function () {
var pt = $(this).parent(),
cl = pt.attr('class'),
id = pt.attr('id'),
pos = pt.attr('position');
$(this).unwrap().attr({id:id, position:pos}).addClass(cl);
});
May be something like this could help:
function deleteParent(id){
var element = document.getElementById(id);
var parent = element.parentNode;
var grandParent = parent.parentNode;
var html = parent.innerHTML;
grandParent.removeChild(parent);
grandParent.innerHTML += html;
}
$('.abc .someblock').contents().unwrap().parent().addClass('someblock');
Demo ---> http://jsfiddle.net/VQRQV/1/
var el = document.getElementById('123');
if(el) {
el.className += el.className ? ' someblock' : 'abc';
}
You can do this first by getting all the elements as
var allElem = document.getElementByID ("*");
then loop through all the elements.
To get to child element check whether a element has children find the last child and a get attribute value example:
var elemVal = allElem[i].className ; or allElem[i].getAttribute("xyx")
and then put the value of this element to desired element in html.
document.getElementById("div").className = elemVal ;