如何在Elm中修改Html.Node？实现添加属性的函数

要实现给已有HTML节点追加属性的addAttribute函数，核心是利用Elm的Html类型本质为Node自定义类型的特性，通过模式匹配拆解并重组节点：

import Html exposing (Html, Node(..))
import Html.Attributes exposing (Attribute)

addAttribute : Html msg -> Attribute msg -> Html msg
addAttribute node newAttr =
    case node of
        -- 处理普通HTML元素节点：拆解后将新属性追加到属性列表
        Node tag attrs children ->
            -- 若希望新属性覆盖原有同名属性，用 attrs ++ [newAttr]
            -- 若希望原有属性优先级更高，用 newAttr :: attrs
            Node tag (attrs ++ [newAttr]) children
        
        -- 文本节点无属性，直接返回原节点
        Text content ->
            Text content
        
        -- 注释节点无属性，直接返回原节点
        Comment content ->
            Comment content

关键说明： #

• Elm的Html msg是Node msg的类型别名，包含三种构造器：Node（对应<div>、<p>这类普通元素）、Text（纯文本内容）、Comment（HTML注释）。
• 属性列表的顺序会影响同名属性的生效规则：Elm渲染时，列表靠后的属性会覆盖靠前的同名属性。比如原有节点已经有style "display" "block"，新属性是style "display" "inline-block"，用attrs ++ [newAttr]会让新属性生效，反之用newAttr :: attrs则原有属性保留。

示例验证： #

按照你的需求，定义以下变量：

node = Html.div [] [Html.text "dummy"]
attr = Html.Attributes.style "display" "inline-block"

调用addAttribute node attr后，得到的节点等价于：

Html.div [Html.Attributes.style "display" "inline-block"] [Html.text "dummy"]

内容的提问来源于stack exchange，提问作者az5112