The process of changing the Document Object Model (DOM). It includes adding, removing or changing DOM elements.
Questions tagged [dom-manipulation]
825 questions
1634
votes
28 answers
How to add a class to a given element?
I have an element that already has a class:
![]()
Now, I want to create a JavaScript function that will add a class to the div (not replace, but add).
How can I do that?
Blankman
- 259,732
- 324
- 769
- 1,199
228
votes
14 answers
How to clear all s’ contents inside a parent ?
I have a div which has several child s.
Example:
How to clear the contents of all child s inside the master …
Prasad
- 58,881
- 64
- 151
- 199
127
votes
9 answers
filters on ng-model in an input
I have a text input and I don't want to allow users to use spaces, and everything typed will be turned into lowercase.
I know I'm not allowed to use filters on ng-model eg.
ng-model='tags | lowercase | no_spaces'
I looked at creating my own…
Andrew WC Brown
- 2,240
- 5
- 22
- 24
114
votes
5 answers
How to move all HTML element children to another parent using JavaScript?
Imagine:
Foo
Bar
Hello World
What JavaScript can be written to move all the child nodes (both elements, and text nodes) from old-parent to new-parent without…
Drew Noakes
- 300,895
- 165
- 679
- 742
103
votes
3 answers
jQuery empty() vs remove()
What's the difference between empty() and remove()methods in jQuery, and when we call any of these methods, the objects being created will be destroyed and memory released?
mabuzer
- 6,497
- 6
- 35
- 41
78
votes
3 answers
Find javascript that is changing DOM element
Are there any techniques I can use to find what javascript is altering an HTML element? I am having some trouble finding how a particular element is getting an inline style of display:none added on load. I know I will find the script that does this…
p e p
- 6,593
- 2
- 23
- 32
48
votes
9 answers
using document.createDocumentFragment() and innerHTML to manipulate a DOM
I'm creating a document fragment as follow:
var aWholeHTMLDocument = ' hello world
';
var frag = document.createDocumentFragment();
frag.innerHTML = aWholeHTMLDocument;
The variable…
Loic Duros
- 5,472
- 10
- 43
- 56
42
votes
2 answers
How to unit test DOM manipulation (with jasmine)
I need to unit test some DOM manipulation functions with Jasmine (currently I run my tests in the browser and with Karma)
I was wondering what the best approach would be to do this?
For example, I can mock and stub the window and document objects…
Jeanluca Scaljeri
- 26,343
- 56
- 205
- 333
39
votes
14 answers
Auto resizing the SELECT element according to selected OPTION's width
I've got this select element with different option in it. Normally the select element would get its width from the biggest option element, but I want the select element to have the default option value's width which is shorter. When the user selects…
Th3Alchemist
- 1,161
- 2
- 13
- 25
35
votes
10 answers
What is innerHTML on input elements?
I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties…
temporary_user_name
- 35,956
- 47
- 141
- 220
32
votes
6 answers
Is there a way to get innerText of only the top element (and ignore the child element's innerText)?
Is there a way to get innerText of only the top element (and ignore the child element's innerText) ?
Example:
top node text
child node text
How to get the "top node text" while ignoring "child node text" ?…
ivymike
- 1,511
- 2
- 20
- 27
31
votes
6 answers
How to add boolean attribute using JavaScript
How do you add boolean attributes using JavaScript? For example, how can you change:
to
to
ryanve
- 50,076
- 30
- 102
- 137
30
votes
3 answers
Remove element with jQuery but leave text
I've got some html that looks like this:
red text some more text blue text
What I want to do is use jQuery to remove all the spans within the div regardless of attached class, but…
lomaxx
- 113,627
- 57
- 144
- 179
28
votes
6 answers
How do I clear the contents of a div without innerHTML = "";
I have a div that is filled by JS created DOM elements,
I want the div to be cleared upon the JS function repeating, however I have heard that using document.getElementById('elName').innerHTML = ""; is not a good idea,
What is a valid alternative to…
Myles Gray
- 8,711
- 7
- 48
- 70
?
I have a div
which has several child
s.
Example:
How to clear the contents of all child
s inside the master
…
Prasad
- 58,881
- 64
- 151
- 199
127
votes
9 answers
filters on ng-model in an input
I have a text input and I don't want to allow users to use spaces, and everything typed will be turned into lowercase.
I know I'm not allowed to use filters on ng-model eg.
ng-model='tags | lowercase | no_spaces'
I looked at creating my own…
Andrew WC Brown
- 2,240
- 5
- 22
- 24
114
votes
5 answers
How to move all HTML element children to another parent using JavaScript?
Imagine:
Foo
Bar
Hello World
What JavaScript can be written to move all the child nodes (both elements, and text nodes) from old-parent to new-parent without…
Drew Noakes
- 300,895
- 165
- 679
- 742
103
votes
3 answers
jQuery empty() vs remove()
What's the difference between empty() and remove()methods in jQuery, and when we call any of these methods, the objects being created will be destroyed and memory released?
mabuzer
- 6,497
- 6
- 35
- 41
78
votes
3 answers
Find javascript that is changing DOM element
Are there any techniques I can use to find what javascript is altering an HTML element? I am having some trouble finding how a particular element is getting an inline style of display:none added on load. I know I will find the script that does this…
p e p
- 6,593
- 2
- 23
- 32
48
votes
9 answers
using document.createDocumentFragment() and innerHTML to manipulate a DOM
I'm creating a document fragment as follow:
var aWholeHTMLDocument = '
hello world
'; var frag = document.createDocumentFragment(); frag.innerHTML = aWholeHTMLDocument; The variable…
Loic Duros
- 5,472
- 10
- 43
- 56
42
votes
2 answers
How to unit test DOM manipulation (with jasmine)
I need to unit test some DOM manipulation functions with Jasmine (currently I run my tests in the browser and with Karma)
I was wondering what the best approach would be to do this?
For example, I can mock and stub the window and document objects…
Jeanluca Scaljeri
- 26,343
- 56
- 205
- 333
39
votes
14 answers
Auto resizing the SELECT element according to selected OPTION's width
I've got this select element with different option in it. Normally the select element would get its width from the biggest option element, but I want the select element to have the default option value's width which is shorter. When the user selects…
Th3Alchemist
- 1,161
- 2
- 13
- 25
35
votes
10 answers
What is innerHTML on input elements?
I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties…
temporary_user_name
- 35,956
- 47
- 141
- 220
32
votes
6 answers
Is there a way to get innerText of only the top element (and ignore the child element's innerText)?
Is there a way to get innerText of only the top element (and ignore the child element's innerText) ?
Example:
top node text
How to get the "top node text" while ignoring "child node text" ?… child node text
ivymike
- 1,511
- 2
- 20
- 27
31
votes
6 answers
How to add boolean attribute using JavaScript
How do you add boolean attributes using JavaScript? For example, how can you change:
to
to
ryanve
- 50,076
- 30
- 102
- 137
30
votes
3 answers
Remove element with jQuery but leave text
I've got some html that looks like this:
red text some more text blue text
What I want to do is use jQuery to remove all the spans within the div regardless of attached class, but…
lomaxx
- 113,627
- 57
- 144
- 179
28
votes
6 answers
How do I clear the contents of a div without innerHTML = "";
I have a div that is filled by JS created DOM elements,
I want the div to be cleared upon the JS function repeating, however I have heard that using document.getElementById('elName').innerHTML = ""; is not a good idea,
What is a valid alternative to…
Myles Gray
- 8,711
- 7
- 48
- 70
