Une question pour débutant: comment écririez-vous le code suivant de manière plus succincte? J'ai l'impression de violer le principe DRY.

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

document.body.appendChild(goToPreviousSection)
document.body.appendChild(goToNextSection)
3
Tzar 27 janv. 2019 à 16:10

6 réponses

Meilleure réponse

Je pense que vos 4 lignes originales sont plus claires et plus élégantes que toutes les réponses publiées jusqu'à présent.

Je pense que ce sont d'excellentes réponses uniquement si vous prévoyez d'avoir plus de boutons que votre exemple. Sinon, ne vous inquiétez pas pour SEC.

1
Ryan 27 janv. 2019 à 19:04

La chose logique est de créer une fonction.

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

const goToPreviousSection = makeButton(), goToNextSection = makeButton();
2
Bergi 27 janv. 2019 à 14:11

Vous pouvez créer une fonction pour créer des éléments

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'))
1
brk 27 janv. 2019 à 13:21

Voici une façon plus fonctionnelle de le faire, en commençant par une liste de boutons, puis en faisant l'insertion, en utilisant deux fonctions makeButton et insertButton:

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

const [goToPreviousSection, goToNextSection] = [
  makeButton(),
  makeButton()
].map(insertButton)
1
Bless 27 janv. 2019 à 17:17

ParentNode.append()

ParentNode.append() peut ajouter plusieurs nœuds et chaînes, tandis que Node.appendChild() ne peut ajouter qu'un seul nœud.

Vous pouvez utiliser append() au lieu de appendChild() pour le faire avec une seule ligne:

function createButton(txt){
  var b = document.createElement("button");
  b.textContent = txt;
  return b;
}
document.body.append(createButton('Prev'),createButton('Next'));
1
Mamun 27 janv. 2019 à 13:35

Vous pouvez écrire une fonction appendBtn

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

Utilisez ensuite la valeur de retour pour effectuer d'autres opérations telles que le changement de style,

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

J'espère que cela t'aides.

0
AbhaY 27 janv. 2019 à 13:21