Take html from a created variable

Question

Take html from a created variable

Asked 7 years ago

Viewed 456 times

2

I have a problem to concatenate variables that I have already created (I know .concat()) and all that.

Problem:

    var input1 = $('input').attr({
        type: 'hidden',
        value: 1
    });

    var input1_2 = $('input').attr({
        type : 'text',
        size : '14',
        name : 'nomeTorre',
        id   : 'nomeTorre',
        class: 'form-control'
    });

I know you use < > but I wasn’t showing here so I took.

var dadosexemplo = input1 + input_2;

or .concat didn’t work

result : [Object Htmlinputelement][Object Htmlinputelement]

How could I create variables that way:

var input1 = "input type='text' value='1'"

I want to change everything that this way to the one quoted above. But always returns me an Object ,e JSON.string... does not solve.

I want to create variables in the first way, concatenate them to create a block literally and then play on the page . php.

In short, I have the ugliest way. I have all html inside a " " and want to change to better preview and maintenance in the future.

4 answers

Browser other questions tagged javascript jquery

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

by bfavaretto • **64,705** points · Answer 1 · 2017-06-16T12:53:33+00:00

Note: had not realized that the question used jQuery, the answer below uses pure JS.

I don’t understand why you want to convert everything to string before you leave. If you already have the elements created as DOM nodes, it is best to continue using this method. You can simply create a container and put your content inside. And then hang this container in the proper place of your HTML, using the same method. Something like this:

// Criação dos inputs como você já faz
// ...

// Criação do container
var container = document.createElement('div');

// Coloca os inputs no container
container.appendChild(input1);
container.appendChild(input2);
// Ou container.appendChild(input1[0]) se input1 for jQuery

// Coloca o container no HTML
// (neste exemplo, direto no <body>
document.body.appendChild(container);

Or, if you don’t want the container in the final structure, you can move what’s in it to another place by replacing the last line above with:

// Move todo o conteúdo para outro nó
while(container.fistChild) {
    document.body.appendChild(container.firstChild);
}

by sergioBertolazzo • **282** points · Answer 2 · 2017-06-16T14:58:22+00:00

2

try this, it works perfectly for me:

var dadosexemplo = input1.prop('outerHTML') + input1_2.prop('outerHTML');

1

It really works, but I had used it the other way, but thank you.

– Rodrigo Luan

2017/06/16 at 15:22
@Rodrigoluan, we’re together!

– sergioBertolazzo

2017/06/16 at 18:05

by Leonardo Bonetti • **5,313** points · Answer 3 · 2017-06-16T15:11:00+00:00

Try that, here it worked:

var input1 = $('input').attr({
            type: 'hidden',
            value: 1
        });

        var input1_2 = $('input').attr({
            type : 'text',
            size : '14',
            name : 'nomeTorre',
            id   : 'nomeTorre',
            class: 'form-control'
        });
        var dadosexemplo = JSON.stringify(input1) + JSON.stringify(input1_2); 
        console.log(dadosexemplo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

by Mathiasfc • **5,837** points · Answer 4 · 2017-06-16T12:33:45+00:00

You can do it this way too, only with javascript, creating the objects and later creating the html elements, p/ leave in the string format I used the attribute outerHTML, follows the example snippet:

var input1_element = {
  tag: 'input',
  attr: {
    id: "hue",
    type: 'hidden',
    value: 1
  }
};

var input2_element = {
  tag: 'input',
  attr: {
    type: 'text',
    size: '14',
    name: 'nomeTorre',
    id: 'nomeTorre',
    class: 'form-control'
  }
};

var input1 = document.createElement(input1_element.tag);
for (var attr in input1_element.attr) {
  input1.setAttribute(attr, input1_element.attr[attr]);
}

var input2 = document.createElement(input2_element.tag);
for (var attr in input2_element.attr) {
  input2.setAttribute(attr, input2_element.attr[attr]);
}

var dadosexemplo = input1.outerHTML + input2.outerHTML
console.log(dadosexemplo);