Why does it always return null?

Asked

Viewed 276 times

3

I created this fiddle as a test.

I have this li within a variable and I intend to add the class c2 to that very same li

var linha = '<li id= "id1" class="c1"> ' + 
            '<div id="id2">1</div>' +
            '<div id="id3">2</div></li>'

document.getElementById('id1').addClass('c2');

My problem is that the document.getElementById('id1') always give me NULL and then when I try to add class gives me the error: inserir a descrição da imagem aqui

javascript jquery html
  • 2

    Returns null because the li is only in a variable and not in the DOM.

  • @Earendul is there any way to catch the li being in a variable?

  • 1

    where jquery comes into this?

  • why then does not modify directly in the variable ?

  • example: line = '<li id= "id1" class="C2"> ' +

  • because this was a small example to exemplify my problem

Show 1 more comment

3 answers

7


You’re mixing native elements with jQuery methods. The document.getElementById('id1') gives null because in the document (i.e. the page) there is no element with id id1. It exists only within the string linha.

If you want to use the addClass you have to select the element with jQuery like this:

var linha = '<li id= "id1" class="c1"> ' +
    '<div id="id2">1</div>' +
    '<div id="id3">2</div></li>'
var $linha = $(linha);
$linha.addClass('c2');
$(document.body).append($linha); // ou dentro do <ul> que imagino que tenhas

jsFiddle: http://jsfiddle.net/9p37Lff1/

You can create a div temporary to make such changes. If you use native methods you can use the classList thus:

var linha = '<li id= "id1" class="c1"> ' +
    '<div id="id2">1</div>' +
    '<div id="id3">2</div></li>'
var temp = document.createElement('div');
temp.innerHTML = linha;
temp.querySelector('#id1').classList.add('c2');
document.body.innerHTML = temp.innerHTML;

jsFiddle: http://jsfiddle.net/9p37Lff1/1/

  • I’m trying to do it with the first example you gave me. So when I assign class c2 I attribute it to var. I can’t attribute it to id of li?

  • @msm.oliveira in the first example $linha is the very element li, inside a jQuery object. You don’t need to select anything... I think you need to show more code than you’re doing. Use my jsFiddle and complete it to show your problem, otherwise it will be difficult to figure out what is failing you, because as you see in jsFiddle it works well.

  • 1

    I have already solved the problem. Your solution has helped a lot. I will accept as an answer

4

The problem is that its variable linha is not added to the document so that you can make the selection through document.getElementById('id1'), then to solve this without using jQuery, you must add the variable linha to a GIFT, in case it can be a virtual DOM:

var linha = '<li id= "id1" class="c1"> ' +
  '<div id="id2">1</div>' +
  '<div id="id3">2</div></li>';

// cria dom virtual
var domVirtual = document.createElement("span");
// adicionar string html ao domVirtual, tornado-a um elemento html de fato
domVirtual.innerHTML = linha;
// seleciona elemento no dom virtual por id
var id1 = domVirtual.querySelector("#id1");
// adiciona class ao elemento
id1.classList.add("c2");

console.log(id1.className)

// agora aqui sua variavel id1, já está com o elemento pronto para ser utilizado.

Example jsFiddle.

Another problem in your code is that there is no method addClass in element interface, where you can use for this purpose the method classList (that is readonly), then using the add() of classList, represented by that part of the previously presented code:

// adiciona class ao elemento
id1.classList.add("c2");

2

Complementing @Sergio’s reply, you don’t need to select by id because when you pass a string with html to jquery, as you are using it, it keeps all the elements as a selection root (in case, just read that you want).

If you have more li’s in the string, you can use the method filter, or even, if what you want is in lower level elements, you can use the find.

var $linha = $("<li id='id1'>li a ser selecionada</li>" +
               "<li id='id2'>li não selecionada</li>");
$linha.filter("#id1").addClass("c2");

var $linha = $("<div id='container'>" +
                   "<li id='id1'>li a ser selecionada</li>" +
                   "<li id='id2'>li não selecionada</li>" +
               "</div>");
$linha.find("#id1").addClass("c2");

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.