How to add attributes to an element that was created with Javascript?

Asked

Viewed 2,716 times

1

I created a elemento javascript:

 $("<div />").addClass("placeholder").appendTo(element);

But I can’t give him attributes, how can I do that? I tried the following code, but it doesn’t work:

$(document).ready(function(){
     $(".placeholder").addClass("fg-red");
 });

If I create it with HTML it works but when I create with Javascript the attempt to add attributes does not work

javascript jquery
  • 2

    This is all wrong addClass(".placeholder"). You do not need the point before to indicate that it is a class, the function addClass serves exclusively for this.

  • Sorry it’s not the real code I typed by cell phone and in a hurry came out wrong and I didn’t see, sorry

3 answers

2


When attaching the new object <div />, just add the classes you want:

Example 1

obj = $("<div />"); 
obj.addClass("placeholder");
obj.addClass("fg-red");
obj.appendTo(element);

Example 2

$("<div />").addClass("placeholder").addClass("fg-red").appendTo(element);

Example 3

$("<div />").addClass("placeholder fg-red").appendTo(element);

  • This example does not work, it is within a function which I believe does not have how to use function variables

  • In this case I will mark the question as not clear enough. And also it was not clear what I meant in the comment. ...está dentro de uma função o que eu acredito que não tenha como usar variáveis de funções

  • Your answer is in line with my question, but I would just like to know how I can do that since the creation of the element is within a function in my case

  • put this in your question. Alias, this already becomes a secondary question. Open another specific question.

  • http://answall.com/posts/comments/238685?noredirect=1

1

I wrote something for you to analyze, to manipulate elements created dynamically use the function ON of Jquery (see documentation)

<html>
    <head>

        <style>
            .verde {
                background:#0f0 !important;
            }

            #teste-area{
                background:#ccc;
                max-width:300px;
                min-height:100px;
            }

            .elemento {
                background:red;
                min-height:50px;
                margin: 5px;
            }
        </style>
        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    </head>
    <body>
        <p>
            <a href="#" id="criar">Criar Elemento</a>
        </p>
        <p>
            <a href="#" id="add">Adicionar Atributo ao Elemento Dinamicamente</a>
        </p>

        <div id="teste-area"></div>

        <script>
            $(document).ready(function(){    
                $('#criar').click(function(e){
                    console.log("nojento");
                    $("<div><center>Elemento Adiciona</center></div>").addClass("elemento").appendTo($('#teste-area'));
                });

                $('body').on('click','#add', function(e){
                    $(".elemento").addClass("verde").empty().html("<center>Elemento Alterado Dinamicamente</center>");     
                    });
            });
        </script>

    </body>
</html>

0

It’s because your object is being created dynamically, use:

$(document). on (function (){
      ... aqui o que você quer fazer, no caso o addClass

}

  • ready only assigns events at the end of page loading, at no other time

  • Change the ready for on did not work, nor with the element already created

  • With the elements already created the ready is necessary to maintain, now for the dynamically created I will search better

Browser other questions tagged javascript jquery

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