Home  >  Q&A  >  body text

How to write functions to create and AppendChild HTML elements in PHP?

I want to write functions that create HTML elements and append child elements to each other, rather than echoing large chunks of HTML code or using echo <<<HEREDOC.

The

createLoginBar function will create a div that I will append to other HTML elements into my createLogoutBanner function.

function createLoginBar() {
    $dom = new DOMDocument();
    $login_bar = $dom->createElement('div');
    $login_bar->setAttribute("id", "login_bar");
    $dom->appendChild($login_bar);
    return $dom->saveHTML();
}

function createLogoutBanner() {
    $dom = new DOMDocument();
    $login_bar = createLoginBar();
    $login_flex = createBlankLoginFlex();
    $banner_login_form = createBannerLoginForm();
    $login_message_flex = createLoginMessageFlex();
    $nonmember_signup_flex = createNonSignupFlex();
    $not_a_member_form = createNotAMemberForm();

    $dom->appendChild($login_bar); //This line gives an error
    $login_bar->appendChild($login_flex);
    $login_flex->appendChild($banner_login_form);
    $login_bar->appendChild($login_message_flex);
    $login_bar->appendChild($nonmember_signup_flex);
    $nonmember_signup_flex->appendChild($not_a_member_form);
    return $dom->saveHTML();
}

createLogoutBanner The line $dom->appendChild($login_bar); in the function gives an error:

Fatal Error: Uncaught TypeError: DOMNode::appendChild(): Parameter #1 ($node) must be of type DOMNode, given in string.

P粉814160988P粉814160988216 days ago400

reply all(1)I'll reply

  • P粉504080992

    P粉5040809922024-03-31 11:14:36

    Due to error condition DOMNode::appendChild() expected to be passed a DOMNode.
    Your createLoginBar function returns a string instead of a node.
    Try the following changes:

    function createLoginBar() {
        $dom = new DOMDocument();
        $login_bar = $dom->createElement('div');
        $login_bar->setAttribute("id", "login_bar");
        $dom->appendChild($login_bar);
        return $dom; //->saveHTML();
    }
    

    Then you will see the error Fatal Error: Uncaught DOMException: Bad Documentation Error. This is because you must use the same parent instance of the DOMDocument to create the child nodes. Instead of creating a new DOMDocument in each function, create a top-level DOMDocument and pass it to each function to use.

    function createLoginBar(DOMDocument $dom):DOMNode 
    {
        $login_bar = $dom->createElement('div');
        // the following line will cause invalid html if this function is called more than once
        $login_bar->setAttribute("id", "login_bar");
    
        return $login_bar;
    }
    function createBtn(DOMDocument $dom, string $value):DOMNode 
    {
        $btn = $dom->createElement('button', $value);
        $btn->setAttribute("class", "widget");
    
        return $btn;
    }
    
    $dom = new DOMDocument();
    $login_bar = createLoginBar($dom);
    $login_btn = createBtn($dom, 'login');
    
    $login_bar->appendChild($login_btn);
    
    $dom->appendChild($login_bar);
    
    echo $dom->saveHTML();
    

    result:

    sandbox

    reply
    0
  • Cancelreply