This question already has answers here:
jQuery Append String vs Object Containing String
(2 answers)
Closed 9 years ago.
These are all ways to append a div to the body of the HTML. But what are the differences and when should I use which (performance-wise).
var div = '<div id="divid"></div>';
$('body').append(div);
and
var div = $('<div id="divid"></div>');
$('body').append(div);
and
$div = $('<div id="divid"></div>');
$('body').append($div);
var div = '<div id="divid"></div>';
$('body').append(div);
The above code will work fine when you just want to append html string to the DOM
The below code will work fine when you just want to append jQuery Object to the DOM and you can manipulate it with jQuery
var div = $('<div id="divid"></div>');
div.css({//your css code});//this is not possible in above example
$('body').append(div);
Related
This question already has answers here:
How to correctly iterate through getElementsByClassName
(10 answers)
Closed last month.
HTML (I'm writing in a combination of Markdown & HTML).
- Ex. **<a class="kanji">犬</a>が**好き ・ I like dogs.
- Ex. **<a class="kanji">私</a>は**オーケーです・**I am** okay
JavaScript
const kanjiAnchor = document.getElementsByClassName("kanji")
for (var i = 0; i < kanjiAnchor.length; i++) {
kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor.textContent}`
kanjiAnchor[i].target = "_blank"
}
The above code returns an href of "https://jisho.org/search/undefined". I was able to do this on a smaller scale only selecting a single anchor with `document.getElementById("kanji"), but I want this to be done to every anchor tag with the class "kanji".
You need to access the textContent of the current element rather than the collection of elements.
kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor[i].textContent}`
This question already has answers here:
Change tag using javascript [duplicate]
(6 answers)
Closed 2 years ago.
In JavaScript, I would like to simply change the
<section class="row"> to <div class="row">
Preferably in the least amount of code as possible to keep it simple :) I was using document.querySelector but that is as far as I got. Thank you for your help!!
You could try
const newDiv = document.createElement('div');
const oldSection = document.querySelector('section.row');
newDiv.innerHTML = oldSection.innerHTML;
newDiv.className = 'row';
oldSection.replaceWith(newDiv);
This question already has answers here:
Adding text to an existing text element in JavaScript via DOM
(7 answers)
Closed 3 years ago.
I need to make a dynamic row counter for my table. I do this with a span but how do i run my javascript function on it so it prints the number out?
html;
<span id="Tellen"></span>
Javascript;
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
}
Could someone help me into the right direction, much appreciated.
You didn't assign output to html span
Try this Tag :
<span id="Tellen"></span>
JS
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
document.getElementById('Tellen').innerText = rowCount
}
But you need some event to call tellen() .. It can be onClick of button or something like this
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
This was a dublicate question, George's link to a previous question had my answer
I'm having an issue where selectors aren't functioning with dynamically generated javascript content.
The initial works just fine. Once the for loop generates more div's, even though it's got the same class, the 'mouseover' css styling won't apply.
Code that Generates the divs:
for (x; x < y; x++) {
output = output + '<div class="over">'+
'But not for these generated divs'+
'</div>';
}
$("#content").html(output);
Code that styles the divs with class "over":
$(".over").hover(function () {
$(this).addClass("styling");
});
$(".over").mouseout(function () {
$(this).removeClass("styling");
});
http://jsfiddle.net/kjhansen/1e08ypms/28/
Use jQuery on() Try this:
$(document).on('mouseover','.over',function () {
$(this).addClass("styling");
});
$(document).on('mouseout','.over',function () {
$(this).removeClass("styling");
});
FIDDLE EXAMPLE
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Inserting an element
How to do insert After() in JavaScript without using a library?
I have this little bit of javascript in a project which adds a chat window after the body of the page, I'd like to change it so that it adds the chat window AFTER my specified div "myPublisherDiv". I think this is pretty simple, any ideas? Thanks in advance!
var div = document.createElement('div');
div.setAttribute('id', 'stream' + streams[i].streamId);
document.body.appendChild(div);
This is a bit trickier. insertBefore is simple, for inserting after a node I wrote a litte helper function:
function insertAfter(newElement, referenceElement) {
referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
}
var div = document.createElement('div');
...
insertAfter(document.getElementById("myPublisherDiv"), div);
But see also https://stackoverflow.com/a/1559632/1048572
This should do it..
var div = document.createElement('div');
div.setAttribute('id', 'stream' + streams[i].streamId);
var target = document.getElementById('myPublisherDiv');
target.parentNode.insertBefore(div, target.nextSibling);
ripped from How to do insert After() in JavaScript without using a library?
Put an id to your div
<div id="myDiv">..</div>
And then append things to it with the appendChild:
document.getElementById("myDiv").appendChild(div);