I am trying to add to all <object>'s on a page a snippet of html. I understand I can access elements by tag name and that I can change the element, but can I simple append to it instead?
In addition, I want to add it to the contents of each tag, not the end of the document. Which of these methods will work?
Assuming no library...
var elementToAppend = document.createElement(tagName); // Your tag name here
// Set attributes and properties on elementToAppend here with
// elementToAppend.attribute = value (eg elementToAppend.id = "some_id")
// You can then append child text and elements with DOM methods
// (createElement or createTextNode with appendChild)
// or with innerHTML (elementToAppend.innerHTML = "some html string")
var objects = document.getElementsByTagName('object');
for(var i = 0; i < objects.length; i++) {
elementToAppend = elementToAppend.cloneNode(true);
objects[i].appendChild(elementToAppend);
}
Using innerHTML or outerHTML as other answers have suggested will likely cause problems for whatever you've embedded with <object>.
appendChild is what you're looking for.
Related
I'm trying to get all classes from one element, then add them to another element created dynamically. I was originally stuck on how to do this, but as I was typing out this question, I worked out a solution. However, it seems a bit verbose. Is there a way to do this same thing more efficiently, i.e. with fewer lines of code?
let classes = this.nextElementSibling.classList; // get classes from target element
classes += ''; // convert classlist object to string
let class_array = classes.split(' '); // convert string to array
const my_div = document.createElement('div'); // create a new div
for(i=0; i<class_array.length; i++) { // loop through array and add classes to the div
my_div.classList.add(class_array[i]);
}
Thanks in advance.
The className will give you a space-separated string of class names an element has. Just use that.
const my_div = document.createElement('div');
my_div.className = this.nextElementSibling.className;
I'm not exactly sure how to word this, but I am using Javascript to change text. I am using Javascript on the site Quizlet. As you can see, there are two columns: terms and definitions. As of now, the script changes both when I only want it to change the term list. Here's a video, too: https://drive.google.com/file/d/1ly3askpLQjzXeCMx9Mk9iVpSEXCw6i25/view
Works, but changes both:
var myClasses = document.getElementsByClassName("ProseMirror");
for (var i = 0; i < myClasses.length; i++) {
myClasses[i].innerHTML = "new content";
}
I tried this, but it didn't work:
var myClasses = document.getElementsByClassName("WordList");.document.getElementsByClassName("ProseMirror");
for (var i = 0; i < myClasses.length; i++) {
myClasses[i].innerHTML = "new content";
}
If you're trying to find a .ProseMirror element only when it's inside a .WordList element, you can use a CSS selector for that with querySelector:
const element = doucment.querySelector(".WordList .ProseMirror");
element.innerHTML = "new content";
That finds the first element with the class ProseMirror that's also inside an element with class WordList.
I don't think you want a list of matches, but if you did, you'd use querySelectorAll (which returns a NodeList of all matches) instead of querySelector (which returns the first matching element).
You can use document.querySelectorAll to get the elements with multiple classes.
document.querySelectorAll('.WordList.ProseMirror');
I am trying to transition from pure JavaScript to jQuery. I have a for loop that dynamically creates HTML elements with data from an API. Here is my old code:
recipeDiv = [];
recipeDiv[i] = document.createElement("div");
recipeDiv[i].setAttribute("class", "recipeBlock");
recipeDiv[i].appendChild(someElement);
However, when I transitioned to jQuery and used this instead
recipeDiv = [];
recipeDiv[i] = $("<div/>").addClass("recipeBlock");
recipeDiv[i].appendChild(someElement);
I get the following error: recipeDiv[i].appendChild is not a function
I know that .appendChild() isn't jQuery (JS), but shouldn't it still work? Even if I use the jQuery .append() function, I still get an error.
Any help is greatly appreciated.
You seem to be confusing yourself by inter-changing jQuery and DOM APIs. They cannot be used interchangeably. document.createElement returns an Element and $("<div />") returns the jQuery object. Element object has the appendChild method and jQuery object has the append method.
As a good practice, I would suggest you choose between DOM APIs or jQuery, and stick to it. Here is a pure jQuery based solution to your problem
var recipeContainer = $("<div/>")
.addClass("recipeContainer")
.appendTo("body");
var recipeDiv = [];
var likes = [];
for (var i = 0; i < 20; i++) {
//Create divs so you get a div for each recipe
recipeDiv[i] = $("<div/>").addClass("recipeBlock");
//Create divs to contain number of likes
likes[i] = $("<div/>")
.addClass("likes")
.html("<b>Likes</b>");
//Append likes blocks to recipe blocks
recipeDiv[i].append(likes[i]);
//Append recipe blocks to container
recipeContainer.append(recipeDiv[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Maybe someElement is not created? Does the code need to be as follows?
recipeDiv = [];
var someElement = $("<div/>").addClass("recipeBlock");
recipeDiv[i].appendChild(someElement);
Okay, so I searched and could not really find an answer for this. I am creating a Javascript function that will easily add an element to the specified element. Here is the syntax:
function add(element, to, idName, className) {
//creates new element for DOM
var newElement = document.createElement(element);
//sets ID attribute for element
var attrId = newElement.createAttribute('id');
attrId.value = idName;
//sets class attribute
var attrClass = newElement.createAttribute('class');
attrClass.value = className;
document.getElementById(to).appendChild(newElement);
}
Long story short, it doesn't work. Yes, my JS is linked fine to my HTML and I have already used many other functions in the same JS file, but this is the one I am having trouble on. I am sure there is some form of a syntax error but can't seem to find it.
P.S. This is my first time using JS to dynamically add a page element without changing innerHTML directly.
The problem is that the id and class are already defined in each element.
To access an element's id, just do element.id = id. As for the classes, there's a thing called element.classList, and if you want to add a class just type element.classList.add("class_name"), and to remove it type element.classList.remove("class_name").
The correct code now comes as:
function add(element, to, idName, className) {
//creates new element for DOM
var newElement = document.createElement(element);
//sets ID attribute for element
newElement.id = idName;
//sets class attribute
newElement.classList.add(className);
document.getElementById(to).appendChild(newElement);
}
check this documentation to understand more about classLists
There's no reason to use .createAttribute() here. You're creating those attributes, but doing nothing to associate them with the element you're creating. Things are much simpler than that:
function add(element, to, idName, className) {
//creates new element for DOM
var newElement = document.createElement(element);
//sets ID attribute for element
newElement.id = id;
//sets class attribute
newElement.className = className;
document.getElementById(to).appendChild(newElement);
}
Note that you're probably going to want to work on the fact that you sometimes need more than just a tag name, id, and class. <input> elements are a good example — they require a "type" attribute (well, not really require, but an API like this would need to account for that.)
I would like to be able to retrieve the data-type, which is a new HTML5 tag name (or any custom tag name for that matter) with pure javascript. The context in which I would need to access this data is from within a loop of an elements childNodes.
var children = document.getElementById('foo').childNodes;
for(var i=0; i<children.length; i++) {
var dataType = children[i].dataType //This does not work.
}
Is there some way to prototype childNodes so that any element retrieved with that tag will have a dataType function attached to it so that the above code would in fact work?
I figure I'll have to use children[i].outerHTML to get the element's raw HTML and then a regular expression to actually put the value from the element.
if you mean getting data from data-* attributes
var children = document.getElementById('foo').childNodes;
var childrenLength = children.length;
for(var i=0; i<childrenLength; i++) {
var dataType = children[i].getAttribute('data-type');
}
If you check out Mozilla's docs on the subject, you'll find that the standard defines a simpler way than .getAttribute: a DOMStringMap which can be read using a dataset property.
In short that means that you can do this
var dataType = children[i].dataset.dataType;
Or you can set the dataset to a variable like the following, which is handy when you're getting several data attributes from an element
var dataSet = children[i].dataset,
dataType = dataSet.dataType;