Question

我很想知道是否可以在javascript var内部访问和修改数据，到目前为止，我尝试使用纯JavaScript以及jquery进行了尝试。所以这两个版本对我来说都很好。

var data = {
    'name': 'Jhone',
    'category': 'Human',
    'type': 'good one',
},
    form = `<input type='text' name='name' id='name'>
            <input type='text' name='category' id='category'>
            <input type='text' name='type' id='type'>`;

jQuery版本（不起作用）

$.each(data, function( key, value ) {

    if ($.type(value) === 'string' && value !== '')
        $(form).find('#'+key).val(value)
});

JavaScript版本（不起作用）（很抱歉，不知道如何在纯js中制作foreach，但问题在于访问元素）

$.each(data, function( key, value ) {

    if ($.type(value) === 'string' && value !== '')
        form.getElementById(key).value = value ;
});

主要要点是我想动态创建js表单并避免设置数据：

var form = `<input type='text' name='name' id='name' value='`+ value +`'>`;

Answer 1

您可以使用ES6 Template Literals(Strings)并执行以下操作：

var id = "This_is_a_test_id"
var form = `<input type='text' name='name' id='${id}'>`;
console.log(form)

Answer 2

由于它是一个字符串，因此必须首先解析它才能使用诸如设置值之类的操作。

var form = `<input type='text' name='name' id='name'>`

form = $(form).attr('value', 'myvalue').prop('outerHTML');

console.log(form);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

使用document.createElement和Element#setAttribute的原始javascript版本：

const input = document.createElement('input'),
  attributes = {type: 'text', name: 'name', value: 'Jhone'};

for (let attr in attributes) input.setAttribute(attr, attributes[attr]);

document.body.appendChild(input);

或者如果您想使用HTML编写输入内容：

// First, append your <input>'s HTML into your DOM.
const inputHtml = '<input type="text" name="name">';
document.body.innerHTML += inputHtml;

// Then, get it and set its [value] attribute.
document.querySelector('input').value = 'Johne';

Answer 4

OP编辑后的修订

// Create form element
const form = document.createElement('form'),
  data = {
    'name': 'Jhone',
    'category': 'Human',
    'type': 'good one',
  };

for (let prop in data) {
  // Create DOM element
  let input = document.createElement('input');
  // Set input attributes
  input.setAttribute('type', 'text');
  input.setAttribute('name', prop);
  input.setAttribute('id', prop);
  input.setAttribute('value', data[prop]);
  // Append input to form
  form.appendChild(input);
}
// Append form to document (for snippet purposes)
document.getElementById('form').appendChild(form)

<html>

<body>
  <div id="form"></div>
</body>

</html>

OP编辑之前

是的，但是您做错了。

首先，var form = `<input type='text' name='name' id='name'>`;是一个字符串，而不是DOM元素。您需要创建一个DOM元素以按您希望的方式对其进行操作。像这样：

var form = document.createElement('form');
var input = document.createElement('input');
input.type = 'text';
input.name = 'name';
input.id = 'name';
form.appendChild(input);

您现在可以在form内查找元素，但不能使用getElementById。为此，请使用querySelector或querySelectorAll。

var nameInput = form.querySelector('#name');

您现在可以按预期的方式操作此DOM元素

nameInput.value = 'Head over to https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model to level up your DOM manipulation skills'

为var

4 个答案: