I have a div with HTML, that I am trying to push inside an empty div. The new div should acquire all the content and styling from the original.
Existing content:
<ul id="existing_id" class="my_class">
<strong>Does not show up in new div</strong>
<li class="style">
<p class="style">Shows up in new div</p>
</li>
</ul>
New, empty div - where I push everything from "existing_id" into:
<div id="empty_div"></div>
I am targeting the elements through JS:
var existing = document.getElementById("exisiting_id")
var existing_li = existing.getElementsByTagName("li")
var empty_div = document.getElementById("empty_div")
var myArray = []
empty_div.innerHTML = ""
// Pushing each existing li element inside myArray
for (var i=0; i < existing_li.length; i++) { myArray.push(existing_li[n]; }
function make_it_happen() {
empty_div.innerHTML += myArray.innerHTML
}
I am getting the content from #existing_id inside the new div - but not the styling associated with each element. Some elements are also ignored such as <strong>Does not show up in new div</div>
If you are wanting to collect all of the HTML from all of the LI elements into empty_div, you don't need myArray. The following should do:
var existing = document.getElementById("existing_id")
var existing_li = existing.getElementsByTagName("li")
var empty_div = document.getElementById("empty_div")
function make_it_happen() {
var html = '';
for (var i = 0; i < existing_li.length; i++) {
html += existing_li[i].innerHTML;
}
empty_div.innerHTML = html;
}
Related
I am having problem creating UL and LI below the P tag. Can someone take a look at my codes below? The javascript is returning the following error:
Uncaught TypeError: thisIsQuizContainer.appendChild is not a function
Changing it to document.body.appendChild() will create the UL in the body. How do i create the UL inside the div quizMainContainer?
This is the HTML:
<div id="quizMainContainer">
<h2>Question 1 of 3:</h2>
<p id="quizQuestion"></p>
<!-- create UL here -->
</div>
This is my Javascript.
var ulCreate = document.createElement("ul");
var thisIsQuizContainer = document.querySelectorAll('#quizMainContainer');
function render(questionIndex) {
// Clears existing data
questionsDiv.innerHTML = "";
ulCreate.innerHTML = "";
thisIsQuizContainer.innerHTML = "";
// For loops to loop through all info in array
for (var i = 0; i < questions.length; i++) {
// Appends question title only
var userQuestion = questions[questionIndex].title;
var userChoices = questions[questionIndex].choices;
questionsDiv.textContent = userQuestion;
}
// New for each for question choices
userChoices.forEach(function (newItem) {
var listItem = document.createElement("li");
listItem.textContent = newItem;
thisIsQuizContainer.appendChild(ulCreate);
ulCreate.appendChild(listItem);
listItem.addEventListener("click", (compare));
})
}
document.querySelectorAll('#quizMainContainer') // nodelist [{},{},{}]
which select list of elements from the dom, I suggest you use
document.getElementById('#quizMainContainer') // node element
I get the clone elements from iframe html using queryselectorall and also append to another element. I want to add surounding div tag for each query selector element before appending.
Now i have output like this
<div class="optedit_summary" id="opteditsum">
<span id="pc1430568488933" class="optbold">nde</span>
<span id="pc1430568582173" class="optdel">fas</span>
<span id="pc1430914284123" class="optdel">non</span>
</div>
Need as like below
<div class="optedit_summary" id="opteditsum">
<div><span id="pc1430568488933" class="optbold">nde</span></div>
<div><span id="pc1430568582173" class="optdel">fas</span></div>
<div><span id="pc1430914284123" class="optdel">non</span></div>
</div>
This is my code for cloning and append element
var elements = document.getElementById('main_iframe').contentDocument.querySelectorAll(".optdel, .optbold");
var editsummary = document.getElementById("opteditsum");
for (var i = 0, im = elements.length; im > i; i++) {
editsummary.appendChild(elements[i].cloneNode(true));
}
Since your solution does not use jQuery, you can create a div element then append the clone to that element like
var elements = document.getElementById('main_iframe').contentDocument.querySelectorAll(".optdel, .optbold");
var editsummary = document.getElementById("opteditsum");
var div;
for (var i = 0, im = elements.length; im > i; i++) {
div = document.createElement('div');
div.appendChild(elements[i].cloneNode(true))
editsummary.appendChild(div);
}
Using jQuery the entire code can be as simple as
var $els = $('#main_iframe').contents().find('.optdel, .optbold');
$els.clone().wrap('<div />').parent().appendTo('#opteditsum');
I want to get every single ID of every element inside of a Div at once, and change all of their class names. Like:
<div id = "container">
<div id = "alot"></div>
<div id = "of"></div>
<div id = "random"></div>
<div id = "ids"></div>
</div>
<script>
var everyId = //all of the ids in #container. but how ?
document.getElementById( everyId ).className = "anything";
</script>
I've seen solutions using libraries but Is this possible with pure Javascript?
Try something like this:
var ids = [];
var children = document.getElementById("container").children; //get container element children.
for (var i = 0, len = children.length ; i < len; i++) {
children[i].className = 'new-class'; //change child class name.
ids.push(children[i].id); //get child id.
}
console.log(ids);
Leverage document.querySelectorAll() and a loop to achieve what you're looking for:
var everyChild = document.querySelectorAll("#container div");
for (var i = 0; i<everyChild.length; i++) {
everyChild[i].classList.add("anything");
}
JSFiddle
You can leverage querySelectorAll to provide a selector to fetch the elements you are interested in.
var c = document.querySelectorAll("#container > div");
console.log(c); // array of all children div below #container
You can use querySelectorAll for the Child elements within the specified parent:
var a = document.querySelectorAll('#container > div'); // get all children within container
console.log(a);
for (var i = 0; i<a.length; i++){ // loop over the elements
console.log(a[i].id); // get the ids
a[i].className = 'newClass'; // change the class names
}
<div id="wpq2">
<div class="subClass">
<a id="linkTO" class="subClass">New Item</a>
or
<a class="subClass">edit</a>
this list
</div>
</div>
i want to hide all the thing except
<a id="linkTO" class="subClass">New Item</a>
I do not have access to html ,
i have to use javascript
i tried somthing
var parentID = document.getElementById('wpq2');
var sub = parentID.getElementsByClassName('subClass');
var lastChild = sub[0].lastChild;
lastChild.style.display = 'none';
Using javascript no idea how to do
Please suggest
Try this instead:
var parentID = document.getElementById('wpq2');
//get the first inner DIV which contains all the a elements
var innerDiv = parentID.getElementsByClassName('subClass')[0];
//get all the a elements
var subs = innerDiv.getElementsByClassName('subClass');
//This will hide all matching elements except the first one
for(var i = 1; i < subs.length; i++){
var a = subs[i];
a.style.display = 'none';
}
Here is a working example
EDIT: The above will only hide the a element, as your text elements are not contained within specific elements then it becomes more tricky. If you are happy to effectively "delete" the HTML you don't want then you can do the following:
var parentID = document.getElementById('wpq2');
//get the first inner DIV which contains all the a elements
var innerDiv = parentID.getElementsByClassName('subClass')[0];
//get the HTML for the a element to keep
var a = innerDiv.getElementsByClassName('subClass')[0].outerHTML;
//replace the HTML contents of the inner DIV with the element to keep
innerDiv.innerHTML = a;
Here is an example
insert new html if you don't need the rest
document.getElementById('wpq2').innerHTML = '<a id="linkTO" class="subClass">New Item</a>';
var parentID = document.getElementById('wpq2');
var innerDiv = parentID.getElementsByClassName('subClass')[0];
var subs = innerDiv.getElementsByClassName('subClass');
subs.forEach(function (sub) { sub.style.display = 'none'; });
document.getElementById("linkTO").style.display = 'block';
Hi i am trying to change Display property of any HTML Tag with certain attribute..
But after many tries i am unable to change the tag properties.. My code is as below
function getAllElementsWithAttribute(attribute)
{
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++)
{
if (allElements[i].getAttribute(attribute))
{
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
return matchingElements;
}
tags = getAllElementsWithAttribute('data-shares');
for(i=0;i<tags.length;i++)
{
tags[i].style.display = "none";
}
And the HTML has below Tag
<div class="shareTools" data-shares="facebook" data-url="#" data-title="Facebook" data-description="Facebook">
<div class="shareToolsBox">
<ul class="shareToolsList">
<li data-share="facebook">
<span>Facebook</span>
</li>
</ul>
</div>
</div>
Does anyone has any idea how to change Tag Style of any tag which has attribut i-e data-shares...
Change the function call to:
tags = getAllElementsWithAttribute('data-shares');
Here's it working on a JS Bin demo: http://jsbin.com/ufogExo/1/ The <div>s with the data-shares attribute are all hidden.
The problem was indeed the extra commas you had on your function call arguments.
I believe this does what you want:
function getAllElementsWithAttribute(attribute)
{
var items = document.querySelectorAll('['+attribute+']'),
i = items.length;
while ( i-- > 0 && (items[i].style.display = 'none') );
}
getAllElementsWithAttribute('data-shares');
see
http://jsfiddle.net/754zR/