This question already has answers here:
Get specific content off responseText
(3 answers)
Closed 6 years ago.
I am using AJAX to get the HTML DOM of another page and then storing it within a variable like this
var doc=xhr.responseText;
list=doc.getElementsByClassName("Cname");
Since the HTML is stored within the doc variable, I am using it to search for the class ,but it is throwing an error :
Uncaught TypeError: doc.getElementsByClassName is not a function
How to fix this,that is how can I use that variable to search for the class stored in it?
You are applying getElementsByClassName on a string (xhr.responseText is a string) it will only work with dom object not with string.
So instead what you can do is, create a temporary dom element object using document.createElement with the HTML content and get element inside.
var temp = document.createElement('div');
temp.innerHTML = xhr.responseText;
var list = temp.getElementsByClassName("Cname");
var temp = document.createElement('div');
temp.innerHTML = '<div class="Cname">a</div><div class="Cname1">a</div><div class="Cname">a</div>';
var list = temp.getElementsByClassName("Cname");
console.log(list);
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I am trying to make an input text and a button when pressed will add to a ul list but I keep having this error in the console and I don't know why
Uncaught TypeError: btn.addEventListener is not a function at script.js:5
Code :
var text = document.getElementsByClassName('text');
var list = document.querySelector('.list');
var btn = document.getElementsByClassName('add');
btn.addEventListener("click", function(){
var content = document.createElement('li')
content.innerText = text.value
list.append(content)
})
You are getting this error because getElementsByClassName returns an array of all elements having the given class. To solve this error you have two options:
Make add id instead of class and use getElementById to get that element.
var btn = document.getElementById('add');
If you do not want to make add id, we know getElementsByClassName returns an array you can access the elements inside this array by its index.
var btn = document.getElementsByClassName('add')[0];
In this case, keep in mind that the button you are trying to access with add class should be the first element with this classname.
This question already has answers here:
How to insert raw HTML in Pug file (not include external HTML file)
(3 answers)
Closed 2 years ago.
I have a javascript function which returns HTML element and I want to pass that element further for user to view as HTML but it appears as a string for example "<" appears as (<) AND ">" appears as (>) etc
here is my code snippet:
res.render('index', { svg: '<div class="preview">MyCustomImage</div>' });
Appearing as:
<div class="preview">MyCustomImage</div>
Set it as innerHTML to a node and assign the node value to a DOM element. This is what I mean
const e = document.createElement('div');
const k = document.getElementById('one')
e.innerHTML = "<div class="preview">MyCustomImage</div>";
k.innerHTML = e.childNodes[0].nodeValue
<div id="one"></div>
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 7 years ago.
I am creating input tag with it's attributes by clicking on list item. Type, name and id are created successfully but it's not generating the class attribute.
var createInput = document.createElement("input");
createInput.type = "text";
createInput.name = text1;
createInput.id = text1;
createInput.class = "abc";
The class property of a DOM Element is actually called className:
createInput.className = "abc";
Check out your browser's Debug Console (F12); it has auto-completion, so you can see what properties exist.
This question already has answers here:
How to get the HTML for a DOM element in javascript
(10 answers)
Closed 9 years ago.
it is impossible to get a string of createElement that you would assign to a variable
var h1 = document.createElement("h1")
h1.innerHTML = "hello world"
alert(h1)
return "[object HTMLHeadingElement]"
when i use appendChild is work but i must use alert or other method
use outerHTML
var h1 = document.createElement("h1")
h1.innerHTML = "hello world"
alert(h1.outerHTML)
Demo: Fiddle
It seems like you want to convert a DOM element to its HTML representation. Put it in a temporary container and access its .innerHTML property:
var div = document.createElement('div');
div.appendChild(h1);
var html = div.innerHTML;
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why does jQuery .after() not chain the new element?
This reference code:
$("#id").after(string);
Does a pretty good job inserting the element of the string where its need to.
How can I get a reference to newly inserted HTML element (string)?
var string = '<div id="some_HTML"><span>hello kitty</span></div>';
$jq_elem = $(string); //if it's not a jQuery object, make it one
$("#id").after($jq_elem); //insert into DOM
$jq_elem.css('color', 'red'); //still available
FIDDLE
Try using insertAfter:
var $str = $(string).insertAfter('#id');
This will work if string is HTML.