Get the html of a created variable

Question

Get the html of a created variable

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)
#4 by (1 votes)

2

I have a problem concatenating variables I've already created (I know .concat() ) and everything.

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 it was not showing here so I took it.

var dadosexemplo = input1 + input_2;

or .concat did not work

result: [object HTMLInputElement] [object HTMLInputElement]

How could I create the variables this way, without doing this:

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

I want to change everything that is this way to that quoted up there. But it always returns me an object, and JSON.string ... does not resolve.

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

In short, I have the ugliest way. The whole html inside a "" and want to change to make it better to view and maintain in the future.

javascript jquery

asked by anonymous 16.06.2017 / 13:52

4 answers

Theoretical question about while and indentation How to omit parameters in the actual parameter pass?

score 3 · Answer 1

Note: did not realize that the question used jQuery, the answer below uses pure JS.

I do not understand why you want to convert everything to string before you exit. If you already have elements created as DOM nodes, it is best to continue using this method. You can simply create a container and put your content in there. And then hang that 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 do not want the container in the final structure, you can move what you have in it to another place, replacing the last line above with:

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

score 2 · Answer 2

2

Try this, it works perfectly for me:

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

16.06.2017 / 16:58

score 1 · Answer 3

To do this, too, just with javascript , creating the objects and later creating the html elements, to leave in the string format I used the attribute outerHTML , follow 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);

score 1 · Answer 4

Try this, it worked here:

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>