Написание конкретной декларации JavaScript более кратко

Question

Вопрос новичка: как бы вы написали следующий код более лаконично?Я чувствую, что нарушаю принцип DRY.

const goToPreviousSection = document.createElement("button")
const goToNextSection = document.createElement("button")

document.body.appendChild(goToPreviousSection)
document.body.appendChild(goToNextSection)

Answer 1

Я думаю, что ваши оригинальные 4 строки более четкие и элегантные, чем все ответы, опубликованные до сих пор.

Я думаю, что они хорошие ответы, только если вы планируете иметь больше кнопок, чем в вашем примере.В противном случае не беспокойтесь о СУХОЙ.

Answer 2

Вот более функциональный способ сделать это, начиная со списка кнопок, затем выполняя вставку, используя две функции makeButton и insertButton:

const makeButton = () => document.createElement("button")
const insertButton = button => {
  document.body.append(button)
  return button
}

const [goToPreviousSection, goToNextSection] = [
  makeButton(),
  makeButton()
].map(insertButton)

Answer 3

Вы можете написать функцию appendBtn

function appendBtn(){
    const btn = document.createElement("button");
    document.body.appendChild(btn);
    return btn;
}

, позже используйте возвращаемое значение для выполнения других операций, таких как изменение стиля,

let goToPreviousSection = appendBtn();
goToPreviousSection.style.background = "red";

надеюсь, это поможет.

Answer 4

Вы можете создать функцию для создания элементов

function createElem(elemName, txt) {
  let elem = document.createElement(elemName);
  let content = document.createTextNode(txt);
  return elem.appendChild(content);
}

function appendToBody(elem) {
  document.body.appendChild(elem)
}

appendToBody(createElem('button', 'Previous'));
appendToBody(createElem('button', 'Next'))

Answer 5

Логично создать функцию.

function makeButton() {
  const btn = document.createElement("button");
  document.body.appendChild(btn);
  return btn;
}

const goToPreviousSection = makeButton(), goToNextSection = makeButton();

Answer 6

ParentNode.append()

ParentNode.append() может добавлять несколько узлов и строк, тогда как Node.appendChild() может добавлять только один узел.

Вы можете использовать append() вместо appendChild(), чтобы сделать его одной строкой:

function createButton(txt){
  var b = document.createElement("button");
  b.textContent = txt;
  return b;
}
document.body.append(createButton('Prev'),createButton('Next'));