Лучший способ добавить контейнер на страницу HTML с JS? - PullRequest
Новая
       13

Лучший способ добавить контейнер на страницу HTML с JS?

1 голос
/ 02 апреля 2020

Я ищу способ добавить эти строки кодов с JS на мою HTML веб-страницу: 

        <div id="cell" style="display: table-cell;">
            <div style=" display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;">
                <textarea id="ff" style="border: unset; background: unset; resize: unset; width: 80%; height: 60% ; margin-top: 20px; margin-left: 17px; padding: 10px;"></textarea>
                <div style="display:inline-block;">
                <input id="mr"  type="date">
                <input id="mc"  type="time">
                </div>
            </div>
        </div>

Мой способ состоял в том, чтобы добавить эти строки кода: 

var cell = document.createElement("div");
var design = document.createElement("div");
var texare = document.createElement("textarea");
var inputsdiv = document.createElement("div");
var dateinput = document.createElement("input");
var timeinput = document.createElement("input");


var tableCell = document.createAttribute("style");
var styledesign = document.createAttribute("style");
var textareastyle = document.createAttribute("style");
var inputsdivstyle = document.createAttribute("style");
var datestyle = document.createAttribute("type");
var timestyle = document.createAttribute("type");

tableCell.value="display: table-cell;";
styledesign.value = " display: inline-block; width: 270px; height: 270px; background: 
url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;";
textareastyle.value = "border: unset; background: unset; resize: unset; width: 80%; height: 60% ; 
margin-top: 20px; margin-left: 17px; padding: 10px;"
inputsdivstyle.value = "display:inline-block;"
datestyle.value="date";
timestyle.value = "time";

cell.setAttributeNode(tableCell);
design.setAttributeNode(styledesign);
texare.setAttributeNode(textareastyle);
texare.value = mission.text;
dateinput.value = mission.date;
timeinput.value = mission.time;

inputsdiv.appendChild(dateinput);
inputsdiv.appendChild(timeinput);
design.appendChild(texare);
design.appendChild(inputsdiv);
cell.appendChild(design);
document.getElementById("rows").appendChild(cell);
});

Я новичок в JS и хочу знать, есть ли более короткий способ добавить весь мой "контейнер div"? Спасибо за помощников.

Ответы [ 3 ]

1 голос
/ 02 апреля 2020

Подумайте об использовании stati c CSS вместо атрибутов - это резко уменьшает Javascript, необходимый для вашего сценария, и гораздо элегантнее.

Вы можете создать DOM, просто написав HTML разметку, что намного проще, чем много createElement s / appendChild s. Вставьте его в DOM, присвоив контейнеру innerHTML. Затем выберите элементы внутри него, которым нужны значения с помощью querySelectorAll, и назначьте их .value свойства: 

const cell = document.getElementById("rows").appendChild(document.createElement("div"));
cell.innerHTML = `
<div>
  <div>
    <textarea></textarea>
  </div>
  <div>
    <input>
    <input>
  </div>
</div>
`;
const [textarea, dateinput, timeinput] = cell.querySelectorAll('textarea, input');
textarea.value = 'mission.text';
dateinput.value = 'mission.date';
timeinput.value = 'mission.time';
#rows > div {
  display: table-cell;
}
#rows > div > div {
  display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;"
}
#rows textarea {
  border: unset; background: unset; resize: unset; width: 80%; height: 60%; margin-top: 20px; margin-left: 17px; padding: 10px;
}
<div id="rows"></div>

Технически возможно вставить значения в разметку HTML вместо того, чтобы потом выбирать элементы и устанавливать их .value, но это менее безопасно: 

const cell = document.getElementById("rows").appendChild(document.createElement("div"));
cell.innerHTML = `
<div>
  <div>
    <textarea>${'mission.text'}</textarea>
  </div>
  <div>
    <input value="${'mission.date'}">
    <input value="${'mission.time'}">
  </div>
</div>
`;
#rows > div {
  display: table-cell;
}
#rows > div > div {
  display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;"
}
#rows textarea {
  border: unset; background: unset; resize: unset; width: 80%; height: 60%; margin-top: 20px; margin-left: 17px; padding: 10px;
}
<div id="rows"></div>

Если значения не заслуживают доверия, это может привести к выполнению произвольного кода.

0 голосов
/ 02 апреля 2020

Вы можете использовать вспомогательную функцию (кредиты для "Eloquent Javascript" книги Марин Хавербеке ): 

function elt(name, attrs, ...children) {
    let dom = document.createElement(name);
    for (let attr of Object.keys(attrs)) {
        dom.setAttribute(attr, attrs[attr]);
    }
    for (let child of children) {
        dom.appendChild(child);
    }
    return dom;
}

Таким образом, вы можете вкладывать элементы более естественно, например, итак: 

const table = elt('div', {id: 'cell', style: 'display: table-cell;'}, [
    elt('div', {style: '...'},
        elt('textarea', {id: 'ff', style: '...'}),
        elt('div', {style: 'display:inline-block;'}),
        // other children
    )
]);
0 голосов
/ 02 апреля 2020

В основном 

var cell = document.createElement("div")
cell.innerHTML = `
           <div style=" display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;">
               <textarea id="ff" style="border: unset; background: unset; resize: unset; width: 80%; height: 60% ; margin-top: 20px; margin-left: 17px; padding: 10px;"></textarea>
               <div style="display:inline-block;">
               <input id="mr"  type="date">
               <input id="mc"  type="time">
               </div>
           </div>`

делает в основном то же самое

...