Find Class in javascript variable [duplicate] - javascript

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

Making an input that adds to a list [duplicate]

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.

How to pass HTML as json object in expressjs res.render function [duplicate]

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 (&lt) AND ">" appears as (&gt) 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>

how to create class attribute using dom in javascript [duplicate]

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.

JavaScript how to convert object document.createElement to string [duplicate]

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;

after() inserting element, then getting it back [duplicate]

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.

Categories

Resources