Javascript 如何向HTML标记添加属性

我一直试图找到一种使用JQuery向HTML标记添加属性的方法，因此假设我有以下HTML代码：

<input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: 0px 0px; background-repeat: no-repeat;">

以及：

我希望能够将这两者替换为以下内容：

<input type="text" name="j_username" id="j_username" value="" autofocus required style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Username">

以及：

我在网上找到的都是这样的：

或：

但是这两个和我想做的不一样，因为第一个是在

之间添加新的东西，第二个是从

到

的替换，我最终实现了我所需要的！现在的情况是这样的：

jQuery (
        function(e) {
                function t(t) {
                        return e("<div />",{"class":t})
                }
                if ("/login"==window.location.pathname) {
                        var n="Welcome to Jenkins";
                        e("#main-panel"),e("#side-panel");
                        var o=e('input[name="j_username"]').attr({placeholder:"LDAP Username",autofocus:"",required:""}).closest("td").prev("td").addClass("input-label"),r=e('input[name="j_password"]').attr({id:"j_password",placeholder:"Password",autofocus:"",required:""}).closest("td").prev("td").addClass("input-label");
                        e("a[href=signup]").closest("div").addClass("signup-container"),e("#yui-gen1-button").addClass("login-button");
                        var i=e(".submit-button"),a=e("#main-panel div:first").addClass("login-container"),c=e('form[name="login"]').length;                        c&&(o.text(""),r.text(""),a.removeAttr("style"),a.wrap(t("login-outer")),a.wrap(t("login-wrapper").prepend(" <h2> "+n+" </h2> ")),i.wrap(t("button-wrapper")),e(".login-container div:last").removeAttr("style"));
                }
        }
),

jQuery(
职能（e）{
函数t（t）{
返回e（“，{”类：t}）
}
如果（“/login”==window.location.pathname）{
var n=“欢迎来到詹金斯”；
e（“主面板”）、e（“侧面板”）；
var o=e（'input[name=“j_username”]'）.attr（{占位符：“LDAP用户名”，自动对焦：“”，必填项：}）；
e（“a[href=signup]”。最近的（“div”）.addClass（“注册容器”），e（“yui-gen1-button”）.addClass（“登录按钮”）；
var i=e（“.submit button”）、a=e（“#主面板div:first”）.addClass（“登录容器”）、c=e（'form[name=“login”]”）、length；c&（o.text（“”）、r.text（“”）、a.removeAttr（“”）、a.wrap（t（“登录外部”）、a.wrap（t（“登录包装器”）.prepend（“+n+”）、i.wrap（t（“按钮包装器”）、e（'login容器div:last”）、removeAttr（“样式”）；
}
}
),
可以使用
.attr
方法读取和操作属性。这应该相当简单。请尝试阅读该方法的手册页：

如注释中所提到的，考虑使用CSS类，因为将样式属性添加到许多单独的元素会很快变得混乱。
 
可以使用.Advor（）函数< /P>添加属性。
您可以运行循环并交叉检查第一个元素的所有属性，如果第一个元素不存在，则可以将其添加到第二个元素

//your first element
$('#j_username').each(function() {
  $.each(this.attributes, function() {
    if(this.specified) {
      var name = this.name;
      var value = this.value;
      var flag = 0;

      //your second element
      $('#j_password').each(function() {
        $.each(this.attributes, function() {
          if(this.specified) {
            if(this.name == name) {
                flag = 1;
            }
          }
        });
        if (flag == 0) {
            $('#j_password').attr(name, value);
        }
      });
    }
  });
});

这是您的HTML元素

<input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: 0px 0px; background-repeat: no-repeat;">
<input type="password" name="j_password" id='j_password'>



但是您需要一个类或密码来访问第二个元素

//your first element
$('#j_username').each(function() {
  $.each(this.attributes, function() {
    if(this.specified) {
      var name = this.name;
      var value = this.value;
      var flag = 0;

      //your second element
      $('#j_password').each(function() {
        $.each(this.attributes, function() {
          if(this.specified) {
            if(this.name == name) {
                flag = 1;
            }
          }
        });
        if (flag == 0) {
            $('#j_password').attr(name, value);
        }
      });
    }
  });
});

这是您想要的
attr（）
：。还要注意的是，你应该真正使用类，而不是在你的HTMLWell中添加混乱的内联样式。javascript文件不介意，我只是试图编辑它以满足我的需要，就像我提到的，我仍然完全是一个使用javascript的n00b。。但我正在学习……）这是jenkins前端的JS文件吗？我可以问你为什么要直接修改这个吗？一个更明智的选择是包含您自己的javascript文件，因为当您安装更新等时，该文件可能会被覆盖……是的，它是为Jenkins前端准备的。。这个JS不是来自Jenkins（它是主题的第三方，位于
${Jenkins_HOME}/userContent
），所以它不会被覆盖我很感激你的回答，我会考虑在以后更熟悉Javascript的时候做类似的事情这是你想要的还是别的什么？我最后用
.attr（）
（检查我的EDIT2）解决了我的问题。。但从长远来看，您的解决方案非常有用！
$("#j_username").attr("placeholder","LDAP Username");

//your first element
$('#j_username').each(function() {
  $.each(this.attributes, function() {
    if(this.specified) {
      var name = this.name;
      var value = this.value;
      var flag = 0;

      //your second element
      $('#j_password').each(function() {
        $.each(this.attributes, function() {
          if(this.specified) {
            if(this.name == name) {
                flag = 1;
            }
          }
        });
        if (flag == 0) {
            $('#j_password').attr(name, value);
        }
      });
    }
  });
});

<input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: 0px 0px; background-repeat: no-repeat;">
<input type="password" name="j_password" id='j_password'>