如何添加到现有属性？

Question

有没有相当于
.setAttribute()的attribute东西:增加了类似的东西:
.addToAttribute()

它不是重置整个属性值......而是添加到当前值.

抬头
属性可以是任何东西:名称,标识,标题......等
我需要随意添加到任何属性而不仅仅是class

是)我有的

function one() {
body = document.body
div = document.createElement('div')
body.appendChild(div)
div.setAttribute("class", "blue")
div.setAttribute("name", "John")
div.setAttribute("id", "box")
}
one()



//should be
//name="John new value"
div.setAttribute("name", "new value")
// Is there something equivalent to .setAttribute()?
// Like .addToAttribue()?



console.log(document.getElementById('box'))

.blue {
  width: 100px;
  height: 100px;
  background: red;
  background: blue;
}
[name~="value"] {
border-radius: 50%;
}

它应该记录什么

function one() {
body = document.body
div = document.createElement('div')
body.appendChild(div)
div.setAttribute("class", "blue")
div.setAttribute("name", "name")
div.setAttribute("id", "box")
}
one()



div.setAttribute("name", "John new value")
console.log(document.getElementById('box'))

.blue {
  width: 100px;
  height: 100px;
  background: red;
  background: blue;
}
[name~="value"] {
border-radius: 50%;
}

Answer 1

您可以使用:

function addToAttribute(element, attributeName, value) {
    element.setAttribute(
        attributeName, 
        (element.getAttribute(attributeName) || '') + value);
}

例:

function addToAttribute(element, attributeName, value) {
  element.setAttribute(
attributeName, 
(element.getAttribute(attributeName) || '') + value);
}

function one() {
  var body = document.body
  var div = document.createElement('div')
  body.appendChild(div)
  div.setAttribute("class", "blue")
  div.setAttribute("name", "name")
  div.setAttribute("id", "box")
}
one()

var div = document.getElementById('box');
addToAttribute(div, "name", "John new value")
console.log(div);

.blue {
  width: 100px;
  height: 100px;
  background: red;
  background: blue;
}
[name~="value"] {
border-radius: 50%;
}